CES 기기 트렌드로 본 2015년 우리가 준비할 것

4K 시대에 필요한 능력

지난 2014년 9월, 27인치 5K 모니터를 2,499달러에 출시할 때 델의 자세는 당당했다. 그럴만했다. 프론티어기도 했고, 모니터로 4K 작업을 하려면 여분의 영역이 꼭 필요하다는 것을 잘 알고 있는 델의 현명한 처사였다. 또한, 6.1mm로 세계에서 가장 얇은 태블릿 ‘베뉴’를 공개하기도 했다. 그러나 한 달 뒤, 애플은 같은 해상도(5,120 × 2,880, 5K)와 같은 크기(27인치)의 ‘올인원 아이맥’을 델의 ‘모니터’와 같은 가격에 발매했다. 모니터에 PC를 포함해버린 셈이다. 게다가 6.1mm 두께의 아이패드 에어 2도 선보였다. 그리고 애플의 특성상 발표 후 얼마 지나지 않아 발매됐다. 델의 모니터는 2015년 발매를 앞두고 있어 ‘세계 최초 상용 5K 디스플레이’ 타이틀도 뺏기게 됐다. 델은 결국 CES 전시에서 모니터 가격을 부가세 포함 249만 9,200원으로 내렸다. 델의 출시 예정 가격은 부가세를 포함하면 원래는 아이맥의 국내 구입가와 유사한 303만 원 수준이 된다. 현재 아이맥 5K 디스플레이의 국내 가격은 309만 원이다. 완전히 저렴한 가격은 아니지만, 이렇게 4K 이상 디스플레이는 애플에 의해 강제로 상대적으로 저렴하게 데뷔했다.

어쨌든 xK(4K 이상) 디스플레이는 화려하고 반짝이는 CES의 모든 트렌드 중 가장 현실에 근접하다. 이미 50~60만 원대의 저렴한 4K 모니터도 시장에 나와 있다. 최근에는 PC 구매보다 고화질 랩톱 혹은 울트라북을 구매하는 경우가 많지만 결국엔 대화면 모니터가 필요하다는 점에서 xK 모니터 판매량 증가를 쉽게 점칠 수 있다. 올해부터 본격적으로 대중화하기 시작할 xK 디스플레이들은 수가가 낮아지는 내년엔 더, 3~4년쯤 지나면 대부분의 가정에 들어앉을 것이다. 애플이 파괴적인 가격의 5K 데스크톱을 출시했으므로 다른 제조사도 뛰어들지 않을 수 없는 상황이 돼버렸다. 이러한 흐름에 대비하지 않는다면 UX디자이너와 퍼블리셔, 웹 디자이너와 웹 개발자의 전쟁은 피할 수 없을 것이다. 아니 거의 이혼할 생각으로 싸우는 수밖에.

사실 우리가 가장 빠르게 대응해야 하는 부분은 이것이다. 웹 디자인을 파괴할 주범이 바로 xK다. 개인 블로그를 말하는 것이 아니라 모든 기업 사이트는 이 괴물 같은 디스플레이의 수많은 픽셀과 싸워야 한다. 해결법으로 ① 더 강력한 반응형 웹 ② 적응형 웹 ③ 카드뷰 중심의 플랫디자인 세 가지를 제시한다.

반응형 웹은 한국에서 희귀한 일은 아니다. 2013~2014년 대부분의 기업 웹사이트들이 반응형으로 제작됐으며, 워드프레스의 성행으로 개인 블로그도 반응형으로 제작하는 일이 많아졌다. 다만 4K 정도까지 가면 문제가 심각해진다. 스마트폰과 별반 차이 없는 해상도의 풀 HD모니터에서는 겪어볼 수 없는 일이다.


▲ 4K의 화질 수준. 죽었다고 복창하자
출처: http://vitiy.info





▲모바일과 PC를 아우르는 카드뷰의 플로우 차트.
좌-우가 뎁스, 위-아래가 앱 간 전환을 뜻한다


▲일반 HD와 5K의 실제 화면 비교, 사람의 크기를 비교해보자


xK 해상도 모니터에서 반응형 웹을 구현하려면 앞으로 비트맵은 완전히 버리는 것이 좋다. 그리고 가능한 모든 곳에서 CSS를, 가능한 모든 곳에서 SVG 아이콘과 폰트를 쓰는 것을 권장한다. 만일 4K 이상에 맞춰 반응형 웹을 작성했다고 치자. 비트맵 이미지를 사용했다면 40MB를 상회할 가능성이 다분하며, 이것을 스마트폰으로 본다고 치자. 스마트폰이 터져버릴지도 모른다. 그리고 해외의 국내 사이트 접속자는 메인 페이지 로딩을 약 10분 이상 기다려야 할 것이다. 사이트에 몇 시간동안 접속한다면 여러분의 LTE 소비량은 하루에 몇 기가를 오갈 것이다. 해답은 CSS와 SVG 사용이다.

일각에서는 적응형 웹이 xK 시대의 해법이라고 말하는 이들도 있다. 일리가 있다. 4K 기준으로 제작한 웹에 모바일 기기로 접속한다고 하면 보이는 건 같아도 통신비, CPU 등의 엄청난 리소스를 낭비하는 셈이 된다. 같은 용량의 이미지를 조그맣게 보여주는 것에 불과하기 때문이다. 따라서 몇 개의 스크린 속성을 지정해놓고 적응형으로 구현하는 것이 소비자의 부담을 줄여주며 접속 환경도 쾌적하게 만들 수 있다. 모든 해상도에 대응할 수는 없겠지만, 풀HD폰 및 7인치 태블릿을 하나로, 2K 수준의 태블릿과 모니터, 4K 모니터 세 가지 정도의 군으로 나눠 접속 기기를 파악 후 화면을 보내주는 적응형이 xK 디스플레이 시대의 해법일 수 있다.

다만 이 경우 디자이너의 업무량이 늘어날 수 있다. 모바일, 태블릿, HD, 4K 이미지를 모두 다 다시 제작해야 할 수도 있으니까. 그런데 프로젝트 단가가 과연 높아질 수 있을까에 대한 의문도 생긴다. 아니라면 우리 모두는 어둠의 시기에 접어드는 것이다. 비딩을 하는 인력은 이점에 대해 클라이언트에게 잘 설명할 필요가 있다. 반응형 웹이 만병통치약이 아니라는 이 글도 함께 보여주면 좋겠다. 반응형 웹과 적응형 웹의 차이를 참고하려면 다음 사이트를 방문하자.(bit.ly/web1501sp)

마지막은 카드뷰 중심의 플랫디자인이다. 단순 플랫디자인이 아닌 점에 주목하자. 외관이 다소 단출해보일 수 있으나 앱과의 통합 경험을 주기에는 가장 좋은 방법이다. 앞으로의 스마트폰 애플리케이션은 개별 앱이 전면에서 물러나고 기본 화면에서는 개별의 카드가 정보를 보여주는 카드뷰가 대세가 될 것이라는 의견이 있다(인터컴 폴 애덤스의 글 요약본 바로 가기: ppss.kr/archives/34606). 이 의견이 허튼소리라고 볼 수 없는 것이, 구글이 전면에 카드뷰를 내세운 안드로이드 롤리팝을 출시했기 때문이다. 그리고 카드뷰는 PC에서도 그럭저럭, 스마트폰에서는 아주 좋은, 스마트 워치나 구글 글래스 등에도 적합한 정보 구조를 갖고 있기도 하다(구글 홈이 아니라 구글 월드로 불러야 되겠다). 만약 카드뷰에 사용자들이 익숙해지지 않는다면 뒤에 감춰놨던 개별 앱을 다시 꺼내면 된다. 만약 이러한 앱 설계 트렌드가 보편적인 것이 될 경우 각 카드는 앱에서뿐 아니라 웹에서도 정보를 꺼내 보여줄 수 있으니(날씨 등의 앱은 보통 웹에서 정보를 끌어온다) 저물어 갈 것이라는 PC 웹의 관점에서도 쓸만한 UI가 된다. 만약 그렇다면 xK 모니터를 장착한 PC 웹사이트는 카드를 스무 개, 일반 모니터에서는 열 개, 태블릿에서는 일곱 개, 스마트폰에서는 네 개, 워치에서 하나 정도의 카드를 보여주는 방식으로 웹 디자인이 재편될 수 있다. 이때 xK나 풀 HD 등의 모니터에서 공간이 발생한다면 자사 디자인 가이드에 맞춰 영역을 지정해 이미지가 아닌 코딩으로 색을 채우면 된다. 이 경우 스마트폰에서 무의미한 디자인 화면은 빼고 보여준다. 가장 완벽한 대응법이지만 단점은 디자인이 심심할 수 있다는 것 정도. 이 디자인을 심심하지 않게 만드는 것이 여러분께 달렸다. 

* 폴 애덤스(Paum Adams) ‘THE END OF APPS AS WE KNOW THEM’ 번역본
출처: ㅍㅍㅅㅅ(ppss.kr/archives/34606)
역자: 인터랙션 디자이너 최민상
원본: bit.ly/appisdead

- 이 이야기는 “카드는 웹의 미래다”와 “목적지가 아닌 시스템”과 같은 인터컴의 기존 글과도 맥락을 같이한다. 카드는 이미 진행 중인 흐름이니 어서 따라 잡으시라.
- 반응형 디자인은 좋지만, 이미 지나간 흐름이다. 우리는 수 많은 기기에서, 상상하기 어려운 상황들에 나타나는 콘텐츠를 디자인하는 것에 대해 이야기하고 있다.
- 알림 영역, 그리고 그 속의 액션들을 디자인하는 일은 제품 디자인에 있어 점점 중요한 부분이 될 것이다. 앱 안의 경험을 디자인하는 것만큼이나 이 영역에 투자해야 한다. 스크린을 디자인하지 말고, 시스템을 디자인해라.
- 무엇과 통합할지 생각해라. 통합의 기회는 이미 넘쳐 흐른다. Zapier나 IFTTT를 생각해보시라. 혼자서는 할 수 없는 일이 통합을 통해서는 가능하다. 제품 전략, 사업 계획, 제품 디자인의 일부로 ‘통합’을 고려해라.
- 안드로이드, 아이폰, 아이패드, 구글 글래스, 나이키 퓨얼밴드, 애플 워치, 이런 것들을 먼저 접하고 뭐가 되는지 안 되는지 파악해라. 시도하고 실패해라.

웹 디자이너가 준비할 것: CSS 이해, 카드 내부에 담을 정보, 스크린 구분 기준 정하기, 웹폰트
웹 개발자가 준비할 것: 스크린 파편화에 대처할 카드뷰 모듈, CSS
영상 콘텐츠 제작사가 준비할 것: 4K 연산을 처리할 수 있는 PC
애플이 준비할 것: 한국 소비자의 반품 러시 대응
소비자가 준비할 것: 당신은 그냥 즐기면 된다

- http://www.ditoday.com/articles/articles_view.html?idno=19188