momolab

Examples of (1) a raw image and (2) an engaging filter that adds contrast and warmth, and (3) a less-engaging filter, which introduces artifacts and adds a cooler temperature. Photos: CC-BY-ND ayman on Flickr

믿고보는 줄리 주(Julie Zhou)의 아티클. 이 글은 요약본이니 관심이 가신다면 원문을 확인해주세요.

제품을 어떻게 살펴보고 비판하는지도 디자이너에겐 중요한 스킬. 친절하게도 크리틱하는 방법을 알려준다. 사실 제품이라고 했지만, 이후 문단부터는 앱이라고 나오기 때문에 번역한 제목은 “앱 크리틱하기” 로 정함.

우선 앱을 받고, 실행하기 전에 체크할 것들:

이 앱이 어떤 부분에서 흥미를 끌었나? 친구에게 들었나? 친구가 뭐라고 했길래 깔았나? 아이콘이 맘에 들었나? 앱 이름이? 예전에 들은 적이 있나? 몇번이나 들었나? 왜 예전에는 안깔다가 지금은 깔았을까? 

지금 상태에서 한줄로 이 앱을 요약해본다면? 이후에 앱을 써본 뒤에 비교해보는 것도 좋겠다.

지금 이 앱에 대해서 오가는 말들은? 인기가 있나? 유용한가? 끝내주나? 평가나 리뷰, 설명같은 걸 봤나?

이런 것들을 하면서 앱의 첫 인상을 형성하게 된다. 이 앱의 밸류 포지션이나, 마케팅에 대해서도 좀 더 많이 이해할 수 있게 되고 말이다.

앱을 켜 보고 사용하며 체크할 것들:

처음 시작하고 가입할 때의 경험은 어땠나? 쉬웠나? 인증이 많아서 귀찮았나?

처음 순간 앱이 어떻게 자신을 설명하나? 뭐하는 앱인지 바로 알겠는가? 아니면 문구가 너무 혼란스러운가? 문구를 이해하고 숙지했는가, 아니면 너무 귀찮고 지루해서 넘겨버렸나?

앱은 얼마나 쓰기 쉬운가? 이 앱의 목적을 보자마자 파악했는가? 아니면 이것저것 눌러봐야 알 수 있었나? 네비게이션할 아이템들이 많아서 정신없었나, 아니면 익숙하고 편안하고 심플했나?

앱을 탐색하면서 받은 느낌은? 미소지을만한 요소들(귀여운 일러스트, 재미있는 문구, 흥미로운 콘텐트)이 있었나? 혹은 이전 화면으로 돌아가기 어려워서 짜증이 났나? 이 앱을 쓰면서 좀 더 스마트해졌다거나, 효율적이 된 것 같았나? 어떤 디테일을 보고 “와 이건 한번도 못본거야!” 라는 느낌을 받은 적이 있나?

기대에 맞는 앱이었는가? 앱이 뭘 할것 같았는지 돌아보고, 이 앱이 거기에 맞게 동작하는지 확인하라. 유틸리티 앱이라면, 문제를 의미있는 방식으로 해결하나? 컨텐츠 앱이라면 컨텐츠가 매력적이었는가?

앱을 얼마나 오래 사용했나? 시간은 흥미와 상관관계에 있다. 오랫동안 썼나? 만약 그렇다면 무엇 때문인가?

사람들에게와 마찬가지로, 앱에 대한 의견도 대부분 처음 몇 분안에 형성되기 마련이다. 잠깐 사용해보는 것으로 이 앱이 어떤 가치를 가지는지, 사용하기 쉬운지, 잘 만들어졌는지 파악해볼 수 있다.

며칠, 몇 주가 지나고 확인해볼 것들:

얼마나 자주 열었나? 언제 주로 쓰나? 무엇때문에 열게 되나? 매력적인 푸시노티 때문인가? 아직도 친구들이 많이 이야기하고 써서? 여기에 계속 의존하게 되나? 습관처럼 쓰게 되는가? 왜 그런가? 그렇지 않다면 무엇 때문일까?

이 앱을 다른 비슷한 앱과 비교해본다면? 어떤 면에서 낫고, 어떤 면에선 모자란지… 비슷한 앱 대신 왜 이 앱을 쓰게 되었는지.

다른 사람들은 어떻게 생각하나? 다른 관점을 살펴보는 것은 더 넓은 시장에서 뭐가 먹히고, 먹히지 않는지 파악하는 빠른 방법이다. 리뷰나 블로그 코멘트를 읽어보고, 트윗을 찾아라. 친구들에게 물어보고 다른 지역에 사는 사촌에게도 물어보라. 그들도 당신과 같이 느끼고 있나? 다르다면, 왜 다르다고 생각하나?

지금까지 살펴본 바로, 1년 뒤엔 이 앱이 얼마나 성공해 있을 것 같나? 공개적으로 떠벌일 필요는 없다. 그냥 혼자서라도 기록해둬라. 투명하고, 솔직하게 이 앱에 대해 걸어봐라. 그럼 1년 뒤에 당신이 틀렸는지 맞았는지 확인해볼 수 있다. 이런 방식으로 “이거봐 난 원래 이거 성공할 줄 알았어” 하는 사후확신 편항을 제거할 수 있다.

(많은 시간이 지난 후) 당신의 예측이 맞았나? 만일 그렇지 않다면, 왜 그런가? 개인적인 취향이 시장의 그것과 얼마나 달랐나? 미래에 당신의 의견을 조정하기 위해서라도, 이건 꼭 이해해야 하는 부분이다.

잘 관찰하지 않고서는 좋은 제품에 대한 감각을 키울 수 없다. 이렇게 많은 리뷰를 하면서 당신은 어떤 디테일이 어떤 결과로 이어지는지에 대해 파악할 수 있다.

최고의 디자이너들과, 제품 기획자들은 사람들을 이해한다. 무엇이 사람들을 움직이고, 무엇이 사람들을 기쁘게 하는지 안다. 왜 이 제품이 성공적이었는지, 어떤 부분 때문에 망했는지에 대해 강력한 이론을 가지고 있다. 그들이 그걸 가지고 태어난 게 아니라, 꾸준하게 사람들을 관찰하고 배웠기 때문이다.

이런 프로세스는 굳이 제품 크리틱이라고 불릴 필요도 없다. 테스트나 면접 질문일 필요도 없다. 다른 사람이 시켜서, 혹은 의무감에 해서도 안된다.

이건 그냥 당신이 호기심이 많기 때문에, 꾸준히, 계속 이뤄져야 하는 일이다. 당신이 더 나은 걸 만드는 방법을 알고 싶기 때문에.

꾸준하게 관찰하고 배워라. 그것만이 길이다.

—

아래 글은 전문 번역이 아니고, 요약 번역한 글입니다. 요약문만 읽지 마시고 원문도 같이 참고하시는 편이 좋을 거라 생각합니다. ㅎㅎ

그 동안 2차원적인 평면으로만 생각되어오던 웹 디자인은, 이제 다양한 모양과 크기의 기기들이 늘어나면서 생긴 문제들로 인해 새로운 방향을 찾아야 하는 상황에 직면했다. 이러한 상황에서, Neo의 Wren Lainer는 레이어를 활용한 새로운 방식의 디자인으로 여러가지 복잡한 문제들을 해결할 수 있다고 말한다. Z축을 더하는 것이다.

2차원에 깊이를 더한다는 말인데, 여기서 말하는 Z축은 그림자나 버튼 하이라이트 같은 요소를 말하는 것은 아니다. 외따로 떨어진 레이어들이 서로 독립적으로 움직이는 인터페이스 형태를 말한다. 아래 그림같이.

페이지는 이제 낡은 개념이며, 우리는 이제 재사용될 수 있는 모듈들을 생각해야 한다. 이제 웹사이트는 뷰 들이 필요에 따라 보였다 보이지 않았다 하는 다이내믹한 구조이다. 여기서 Z축을 활용하여 좀 더 직관적이고 사용하기 쉬운 인터페이스를 설계하자는 이야기인 것이다.

말하자면, 페이지 위에 버튼을 얹을 공간이 더는 보이지 않고, 어떻게든 해결을 하고 싶은 상황이지만 답이 보이지 않을 때 그 페이지 바깥에 3차원 공간을 떠올리라는 것이다. 여기서 말하는 Z축의 요소는 두 가지이다. 1) 레이어, 2) 트랜지션 이 그것이다.

1. 레이어

Z축에서의 핵심적인 요소는 레이어이다. 여기서 말하는 레이어란 나머지 뷰 위에 크게 자리하는 UI 요소일수도 있고, 필요에 의해 보였다 안보였다 하는 풀 스크린 뷰일지도 모른다. 뭘 어떻게 만들건 간에 확실한 존재의 이유를 부여해 주어야 한다. 사이트 내내 꾸준히 보이며 사용자들이 내가 만든 디자인을 더 잘 이해할 수 있도록 도와야 한다. 

Lainer는 이어 몇 가지 예시를 들며 Z축 디자인에 대해 설명한다.

메뉴

요소가 Z축 앞에 있을 수록 더 중요해진다. Teehan+Lax의 디자인을 들어 설명하는데, 메뉴가 거의 화면을 뒤덮어버리고, 메뉴들의 폰트 사이즈도 거대하다. 일반적인 gnb보다 훨씬 과감한 방식을 택했고, 그래서 별도의 레이어를 택했을 것이다. 이런 것들이 모든 사이트에 적용되어야 할 교과서적 해답이라고 볼 수는 없겠지만, 메뉴 자체도 콘텐츠처럼 인식될 수 있다는 측면에서 의미있다고 본다. 

액션 버튼

주요 액션 버튼은 보통 다른 UI요소들 앞에 위치한다. 여기서는 챗 헤드를 예로 든다. 챗 헤드는 아래 화면은 그대로 두고, 한 레이어 위에서 자유롭게 떠다니기 때문에 실제 화면 비중을 그렇게 많이 차지하지 않으면서도 돋보일 수 있다. 버튼이 좀 더 돋보이길 원한다면 이런식으로 Z축을 활용하여 강조하는 것이 좀 더 우아한 방법일지 모른다.

스토리텔링

서로 다른 레이어 위에 위치한 요소들은 각자 다른 속도로 움직일 수 있다. 이걸 흔히 패럴랙스라고 부르는데, 최근 많이 사용되는 패턴이다. 오브젝트들이 서로 다른 속도로 움직이면서, 깊이를 주기도 하고, 시간의 흐름 같은 것을 표현하기 쉬워진다. 여기서는 Superfluous를 예로 든다. Let’s Free Congress 같은 사이트나 Inception Explained 도 비동기 스크롤링으로 그냥 플랫한 인포그래픽일 수 있었던 것들을 좀 더 풍부하게 만들었다. 

이런 것들은 지금의 유용성 뿐 아니라, 앞으로 펼쳐질 다차원적 인터랙션으로 나아가는 길이기도 하기 때문에 의미가 있다. 사용자, 그리고 우리 자신들에게도 대비를 할 수 있는 기회가 된다.

2. 트랜지션

레이어를 쓰면 레이어 간 전환을 부드럽게 하는 애니메이션을 적용하는 것이 중요하다. 레이어 간의 관계를 설명해줄 수 있고, 지금 어디에 있고 앞으로 어디로 가는지 알려주기 때문이다.

슬라이딩

슬라이딩은 가장 흔한 패턴이다. 언제건 슬라이드 한번만 하면 네비게이션 메뉴나 숨겨진 패널 등이 금세 나타난다. Gmail을 예로 드는데, 사실 Gmail은 메뉴가 슬라이드하지 않고 메인 윈도우가 밀리면서 메뉴를 보여주는 형식이다. 이 와중에 메인 윈도우의 일부가 보여지는데, 이 덕분에 각 제목의 몇 줄씩을 볼 수 있고, 편지함도 여전히 기능하게 된다.

모바일 웹사이트에서는 이런 패턴을 적용할 때 주의해야 하는데, 메뉴가 웹페이지 위로 보여지는 것은 메인 뷰를 슬라이드하는 것 보다 좀 더 덜컹거리고 방해되기 때문이다. 

키보드 등을 아래로 내리고 다른 메뉴를 보여주는 방법도 좋다. Tweetlist를 예로 들었는데, 트윗 옵션 메뉴같은 것들은 계속 보여질 필요가 없으니 숨기는 게 좋고, 그리고 키보드 뒤에 숨기는 것은 둘 간의 관계를 강화하는 효과까지 있다.

줌하기

사실 줌 하는 패턴은 꽤 나와있지만, iOS7때문에 다시 주목받고 있다. 다양한 앱을 들어 설명하고 있는데… iOS7은 오브젝트를 확대/축소하는 게 아니라 카메라를 줌인하는 것이 핵심적인 차이를 만들어낸다고 한다. 사용자의 시점을 전환해서 새로운 층이 있다는 것을 보여주는 것이다. 뷰를 줌 아웃 하면서 숨겨진 넓은 공간을 보여주는 것도 마찬가지이다. 캔버스를 좀 더 넓고 깊게 사용할 수 있다. 포스퀘어의 줌인은 다른 것보다는 좀 은근한 편이지만, 좀 더 디테일한 수준의 정보를 보여준다는 느낌을 강조한다.

확대 / 축소는 정보 위계와 일치해야 한다. 디테일한 정보는 줌 인, 카메라가 줌 아웃되면 좀 더 상위 레벨의 정보로 넘어가는 것이다.

다른 트랜지션

마지막으로는 Flip이나 Folding같은 것을 제시한다. 3차원 오브젝트에는 밝은 공간, 어두운 공간이 있는데 오브젝트를 플리핑하면서 사용자들이 이런 부분들을 이해하기 쉬워지는 것이다. Flip의 단점은 느리다는 것인데, 180도 돌리는 건 꽤 큰 트랜지션이기 때문에 느리고 불편하게 느껴질 수 있다. 시간이 중요한 상황에서 Flip은 좋은 대안이 아니다. 상황에 맞게 잘 써야 한다. 예를 들면, 카드 기반의 레이아웃에서는 오브젝트를 플립하는 것으로 추가 정보를 효과적으로 보여줄 수 있다.

(후략)

—

(역주) 더하고 싶은 말

이 아티클은 Matias Duarte를 포함한 다양한 사람들이 추천한 것으로, 최근의 디자인 추세를 짚어냈다는 측면에서 의미가 있다. 한 장의 페이지 안에 필요한 모든 버튼이 다 들어가야 하는 기존의 디자인, 페이지 단위로만 트랜지션이 일어나던 구조는 이제 끝났다. 

이젠 한 페이지 안에 여러 가지 모듈들이 숨겨져있고, 그 모듈들이 쉴 새없이 트랜지션하며 의미를 만들어낸다. 페이지의 의미는 점차 줄어든다. 모듈을 담는 캔버스 이상의 의미를 얻기 어렵다. 예전에는 6페이지가 필요했던 플로우도, 한 페이지 안에 몇 개의 모듈을 넣는 것으로 쉽게 대체된다. 물리적인 페이지는 한장만 있어도 그만일지 모르겠다.

Beats Music의 1분 30초 짜리 광고에 실린 Trent Reznor의 나레이션. 이 서비스를 NIN의 Trent Reznor가 만든다는 사실에 나는 이미 두손 두발 다 들었음.

정확하게 들어맞진 않겠지만.. 우리나라에서는 윤종신 정도가 어떨까 싶네.

만일 매 순간에 완벽하게 들어맞는 음악을 손쉽게 들을 수 있다면?

드라이브는 짧아질것이고, 키스는 더 깊어지며 영감은 넘쳐 흐를겁니다.

기억이 흘러넘치고, 매일 밤 사랑에 빠질 거예요.

삶이 마법 같아질거예요.

그 힘을 끌어내려면, 우선 존중해줘야 합니다. 경외심을 가져야 합니다.

음악이 단순히 디지털 파일 이상의 의미라는 것을 깨달아야 합니다.

그것은 숨을 쉬고, 피를 흘리고, 느낄 수 있다는 것을.

그렇게 하기 위해선 서킷 보드 이상의 무언가가 필요합니다. 당신 머리 속의 그것 말예요. 코드는 밴드들에 녹아있는 보위의 영향력을 들을 수 없고, 롤링 스톤즈가 아리사 프랭클린으로 절묘하게 연결될 수 있을 지 알 수가 없죠.

만족을 얻기에 딱 한 트랙이 더 필요한 그 순간.

소프트웨어 이상의 무언가가 필요해 질겁니다.

두뇌와 영혼, 음악에 대한 열정에 사로잡힌 사람들.

자, 이게 우리가 한 일입니다.

우리는 우아하고, 재미있는 솔루션을 만들었습니다.

최고의 기술을 친근하고 믿을만한 인간성, 음악은 감정, 즐거움, 문화, 삶이라는 것을 이해하는 인간성과 통합한 솔루션 말입니다.

이것은 음악을 즐기는 완전히 새로운 방식입니다.

축음기부터 CD, 스트리밍으로 이어온 진화의 다음 발걸음입니다.

하지만, 가장 중요한 것은 말이죠.

플레이 버튼을 눌렀을 때 당신은 완전히 감동하게 될 거란 사실입니다.