상단여백
HOME 칼럼 칼럼 & 기자수첩
[TECH meets DESIGN] 형태는 테크를 따른다?손바닥 안 스마트폰을 위한 새 UI 디자인 트렌드에 대비하기
  • 박진아 IT칼럼니스트
  • 승인 2017.11.17 11:40
  • 댓글 0

컴퓨터는 이제 인터넷 모바일 기기 모양을 한채로 우리 손 안으로 쏙 들어왔다. 오늘날 인터넷 망으로 연결된 컴퓨터 사용활동은 거의 현대인 손 안의 스마트폰을 통해서 이루어지고 있다고 한다. 얼마전까지만 해도 마케팅 전문가들은 사용자들이 집에 주 컴퓨터를 별도로 소유하고 있으며 모바일 스마트폰은 거리나 대중교통수단 안에서 A에서 B로 이동하는 동안의 자투리 ‘죽은 시간’을 죽이는데 사용된다고 여겨졌다. 블록형 또는 플립형 핸드폰이 주로 쓰이던 10년 전에는 그랬던 것이 사실이지만 지금은 사정이 달라졌다. 소비자들은 집 안 소파에서나 침대에서도 스마트폰을 손에서 놓지 않는다.

스마트폰이 PC를 대체하는 주 컴퓨터로 자리잡가 가고 있다. Image courtesy: Microsoft.

이제 스마트폰은 현대인에게 필요한 유일한 컴퓨터
테크 세상의 급속한 발전과 더불어서 소비자들의 의사소통 방식도 급격히 변화하고 있다. 『더넥스트웹(TNW)』 테크 뉴스 사이트에 따르면 2016년 현재 이미 전세계 모바이 사용자들의 93%가 이동 중은 물론 가정이나 직장에서 머물러 있는 상태에서도 뉴스를 검색하고 일상업무를 처리하며 온라인 쇼핑을 하고 사진을 찍고 음악과 영상물 감상을 하는데 스마트폰을 이용하는 것으로 조사됐다. 모바일 기기들은 첨단 프로세서와 데이터 처리 기술을 바탕으로 늘 성능이 막강해지고 기능성도 다양해졌을 뿐만 아니라 특히 4K 스트리밍 서비스가 널리 보편화된 우리나라의 경우 일반 사용자들은 아예 종전의 데스크탑이나 노트북 컴퓨터를 외면한체 컴퓨팅 업무 일체를 스마트폰으로 옮겨서 해결하는 것이 대세다.

이미 2015년이 시작될 무렵, 『와이어드(Wired)』 지는 퓨 리서치 센터(Pew Research Center)의 설문조사 보고서를 인용해 향후 2년 안이면 스마트폰이 홈 컴퓨터 거의 모두를 대체하여 일상에 필요한 유일한 컴퓨터 디바이스가 될 것이라고 예견했다. PC용 스크린에 보기 좋게 디자인되었던 과거 웹사이트와 서비스 사이트들은 급속히 스마트폰 사용자들을 위한 보기 좋고 사용이 용이하도록 스마트폰 친화적인 디자인을 재정비하고 앤드로이드 및 iOS용 모바일 앱을 서둘러 개발해 제공하기 시작했다. 최근에는 아예 사이트 개발단계 시작부터 [웹 환경을 무시하고) 오로지 모바일 기기 만을 위해 최적화시켜 개발・디자인한 네이티브 앱(Native App 또는 Native Application) 만을 제공하는 플랫폼과 앱 개발업체들도 있다. 아직도 PC상의 웹 환경과 모바일 기기에서 공통으로 적응해 작동하는 하이드리드 앱이 주류이긴 하지만 말이다.

로이터스 연구소가 올봄 발표한 스마트폰 사용 현황. 스마트폰 사용자의 거의 절반은 침실에서, 또 놀랍도록 많은 비율의 사용자(응답자중 3분의 1)이 화장실에서 스마트폰을 쓴다고 응답했다. 자료 출처: Reuters Institute. 인포그라픽: Statista.

이제 ‘형태는 테크를 따른다’ - 새로운 UI 디자인의 기회
지금부터 약 1백 년 전에 미국의 근대주의 건축가 루이스 설리번(Louis Sullivan)이 ‘형태는 기능을 따른다’ - 건축과 디자인계 인사이더 사이에서는 ‘FFF’라고 축약해 불린다. - 고 선언했다. 디자인된 건물이나 산업디자인 제품을 겉모양을 보면 어떤 구실을 하는 물건인지 알 수 있다는 ‘기능주의’ 원리인데, 그 후로 20세기 대중소비 시대의 건축과 제품디자인계는 사물에 형태를 가할 때에 대체로 이 기능주의 원리를 고려해 설계했다. 허나 겉으로 보이는 모양과 그 안의 컨텐츠가 분리되어 버린 21세기 디자인 실무에서는 사실상 폐기된 디자인 철학이 되었다.

그 대신 지금은 테크의 발전이 제품디자인과 컨텐츠 서비스 방식의 변화와 혁신을 주도한다. IT업계와 소비자의 무수한 추측과 호기심을 모은 끝에 지난달 애플 아이폰8과 아이폰X 모델이 출시되고 삼성 갤럭시8과 노트8 출시와 함께 디자인계 역시 스마트 디바이스의 사용자 인터페이스(user interface, UI) 디자인과 사용자 경험(user experience, UX) 디자인 분야에서 업그레이드 기회를 맞고 있다. 

이음새조차 보이지 않을만치 말끔하고 세련되게 디자인된 오늘날의 각종 디자인 제품들, 특히 소비자용 가전 및 통신 기기들은 작고 얇고 날렵한 상자 속에 포장되어 있어서 무슨 기능을 하는 어떤 용도의 사물인지 알 수 없다. 소비자들은 이제 이른바 ‘컨텐츠와 디자인 용품의 외형이 분리’된 디자인 문화 속에서 살면서 우리 주변 속 일상용품들을 상대(interact)하고 있다. 이 ‘이같은 제품 디자인 현실은 과학기술 즉 테크의 뒷바침이 없이 불가능하다. 즉, 기술은 ‘형태는 기능을 따른다’는 원리를 뒤흔든 핵심 추진력이 되었다.

테크가 주도된 디자인 시대, 디자이너들은 또한 사용자 인터랙션 디자인도 그에 맞게 변화의 기회를 맞고 있다. 이때까지의 웹 사이트 디자인과 애플리케이션의 UI/UX 디자인에서도 테크의 도움을 받아 과거 회피되던 관행이 허용되어 새 시각적 유행을 탄생시킬 것으로 보인다. 기업 IT부서와 디자인 부서 및 사이트 관리자들에게서 성가신 변화이겠지만, 인터페이스 디자이너들에게는 새로운 기회이자 도전거리가 생겼다. 특히 최근 새로 출시된 신 모델들이 모조리 베젤을 없애 디스플레이 크기를 최대로 부풀린 프레임리스(frameless) 혹은 제로베젤 디스플레이를 일제히 선보이면서 화면 하단의 홈버튼, 지문센서, 기타 핵심 기능버튼을 없애고 화면 속으로 옮겨 그에 따른 사용자의 기기 인식 및 소통 방식에도 소소한 전환이 일어날 것으로 보인다.

예컨대 애플 아이폰8은 6과 7 기존 모델들과 스크린 크기가 동일하여 디스플레이와 사용자 시각경험에 별 차이가 없지만 아이폰X 모델은 상하 베젤 부분을 스크린 영역으로 통합시켜 버렸기 때문에 그 결과 동일한 375 포인트 폭에 812 포인트 높이로 세로로 길어졌고 해상도는 3x으로 높아져서 그에 적합하도록 웹 사이트와 애플리케이션의 이미지를 최적화 재작업이 필요해졌다. 텍스트 컨텐츠도 기존 모델의 스크린에 비해 20%를 더 디스플레이해 주기 때문에 텍스트 구도와 여백을 포함한 공간 구성도 재조정해야 한다. 그런가하면, 사진과 비디오의 해상도가 매우 높기 때문에 과거 그 언제보다도 수준이 높고 보기에 수려한 사진 이미지를 사용해야만이 사이트가 조잡해 보일 위험을 피할 수 있을 것이라고 애플 사가 제공하는 휴먼 인터페이스 디자인 가이드라인은 조언한다. 그런가하면 국내 삼성 갤럭시와 LG 스마트폰들은 가로 대 세로 베젤을 둘다 늘여서 제한된 기기 사이즈에서 화면 크기를 전체적으로 최적화하는 식으로 디자인됐다.

햄버거 메뉴 아이콘(≡)이 사용자들 사이에서 잘 사용되지 않는다는 문제점을 지적하며 일부 웹 디자이너들은 햄버거 아이콘을 없애고 좌우 스크롤 기능으로 대체하기도 한다. 이미지 예: The Anonymous Hamburger.

보다 진보한 기술로 더 우수한 성능과 역량을 갖춘 새 디바이스의 등장에 가장 최적화되고 앞선 멋진 디지털 그래픽 디자인을 꿈꾸는 디자이너들 사이에서는 벌써부터 사용자 인터페이스에 대한 갖가지 비평과 제안들을 내놓고 있다. 우선, 작은 스크린의 스마트폰에서 메뉴를 효율적으로 접어다폈다하며 볼 수 있게 정리해 준다고 하여 인터페이스 디자이너들 사이에서 사랑받던 햄버거 메뉴 아이콘(≡)은 폐기하자는 목소리가 높다. 햄버거 메뉴 기호는 실제로 사용자들의 눈에 잘 띄지 않고 잘 사용되지 않은 결과 수많은 웹 사이트들은 기존 웹사이트식 가로 나열식 메뉴로 되돌아간 사례가 많다.

색상도 매년 유행을 달리하며 변화하는데 디지털 인터페이스 디자인 분야도 새 유행색에 주목하여 디자인 업그레이드 할 것을 제안한다. 각종 디자인 업계는 색상의 유행은 팬톤(Pantone) 색채연구소가 매년 선정하여 발표하는 ‘올해의 컬러’를 반영하여 제품개발을 하는데, 예컨대 2015-16년에는 로즈 쿼츠 주제톤을 반영하여 분홍-연보라-연초록 계열을 색상들이 모바일 기기에도 반영되었고 올해 2017년에는 선정색인 녹색으로 테크와 자연을 연결시키는 컨셉을 전달했다. 내년 2018년에는 명도가 높은 원색계열로 활기를 부여하는 색상들을 제안하게 될 것으로 추측된다.

세심한 시각적 효과에 민감한 디자이너들이 또 매우 주목하는 요소는 활자체다. 얼마전까지만 해도 크기가 작은 모바이 디바이스를 위한 그래픽 디자인 및 인터페이스 디자인 영역의 디자이너들은 산세리프체(sans serif)를 고집해 왔다. 작은 화면과 한정된 컨텐츠 공간에서 가독율을 높이고 활자 가장자리가 깨져보이지 않고 깔끔하게 마무리된 시각적 효과를 보장하기 위해서 활자에 꼬부라짐이 없는 상세리프체를 사용하는 것은 당연한 디자인적 결정이었다. 

캘리포니아의 훔볼트 자연공원 홈페이지 디자인. PC와 스마트폰 환경에서에서 파노라마 영화를 보는 시각경험을 선사하도록 디자인된 사례. 파노라마 사진 효과는 테크의 발전과 데이터 로딩 기술 덕분에 2015년부터 널리 가능해진 트렌드다. Image: Humboldt Nature Park.

그러나 새로 속속 출시되는 고해상 레티나 디스플레이는 세리프체의 세부적 디테일까지도 아무런 무리없이 매끄럽게 디스플레이해 줄 수 있게 되어 향후 특히 서체디자이너들은 한결 폭넓어진 창조적 자유를 디지털 환경에서 응용할 수 있을 것으로 보인다. 더불어 ‘작은 디스플레이 속 미니멀리즘 디자인’이라는 추세에 따라 아이콘이나 일러스트레이션은 2차원적으로 추상화시킨 이른바 ‘플랫디자인(flat design)’이 대세였지만 최근에는 스코이모피즘(skeuomorphism) 트렌드를 반영해 3차원 입체감을 더한 디자인이 다시 등장하고 있다.

고해상 레티나 디스플레이와 한결 커진 화면은 고품질 우수한 비쥬얼의 사진과 영상을 요구하게 될 것으로 보인다. 사진찍기 애호가나 전문사진가들이 실력을 발휘할 수 있는 절호의 기회가 될 것으로 보인다. 특히 어떤 사진들이 고성능 스마트폰용 사진으로 각광받을까? 셔터스톡(Shutterstock) 스톡이미지 판매 사이트 블로그가 정리한 크리에이티브 트렌드 인포그라픽에 따르면, 과거 노스탈지아를 불러일으키는 향수적 빈티지 이미지와 산업/기계/과학기술을 연상시키는 첨단테크 이미지를 한데 융합시킨 사진이 당분간 사용자들의 시각세계를 사로잡을 것이라 내다본다.

좀 더 상세히 말하자면, 산업과 테크적 이미지는 클로스업으로, 자연이나 인프라 시설 풍경 사진은 멀리서 찍은 파노라마풍이나 위에서 아래로 내려다본 거시적・조감도풍 이미지로 대형 은막을 보는듯하거나 평소에 생각치 못했던 의외의 시점으로 포착한 독특한 이미지가 압도적인 비주얼을 주는데 효과적이다. 흔히 인터페이스 디자이너들은 스마트폰 사용자들이 화면을 위아래로 스크롤하는 것을 좋아하지 않는다고 생각하여 텍스트와 이미지를 최소화하여 한 화면 속으로 구성하는데 집착하는 경향이 있다. 그러나 실제로 사용자들은 보기 좋은 우수하고 풍부한 이미지와 긴요한 정보가 담긴 페이지를 위아래로 스크롤하는 것에 그다지 불만스러워하지 않는다고 한다. 요즘 유저들 사이에서 급격히 포용되어 활용되는 이모티콘을 전체 디자인과 잘 어울리도록 활용하는 방법도 권장된다.

PC는 덩치가 점점 작고 가벼워지며 스마트 디바이스화하는 동시에 스마트폰은 한정된 프레임 사이즈 안에서 디스플레이를 최대한 크게 디자인되는 추세다. Source: Deloitte..

인터넷 홈페이지를 갖고 있어야 한다는 웹프레젠스(web presence) 개념도 흐려졌다. 특히 페이스북, 트위터, 카카오톡 같은SNS 플랫폼이 널리 보편화된 이후로 사용자들은 특정 인물이나 업체에 대해서 알고 싶을 때에 홈페이지를 방문하여 네비게이션을 하기 보다는 서치 엔진의 검색결과 상위 링크나 소셜네트워크 사이트로 바로 가서 컨텐츠를 확인하고 판단을 내리는 추세다. 잘 작동하는 웹 사이트나 모바일 앱은 굳이 디자인이 세련되고 예뻐보여야 하는 것은 아니지만, 스탠포드 대학 과학자들이 실시한 연구에 따르면 웹 및 모바일 이용자들은 절반은 단연 유행에 맞고 보기 좋게 디자인된 웹 사이트나 모바일 앱을 더 신뢰한다고 한다고 한다.

박진아 IT칼럼니스트  feuilleton@naver.com

<저작권자 © 녹색경제, 무단 전재 및 재배포 금지>

박진아 IT칼럼니스트의 다른기사 보기
icon인기기사
기사 댓글 0
전체보기
첫번째 댓글을 남겨주세요.
여백
여백
여백
여백
여백
여백
Back to Top