앱 디자인 사고 과정에 대한 짧은 글
서체 중심 앱 로그인 화면 디자인 과정
디자인을 할 때 우리는 머릿속에서 많은 과정들을 거칩니다. 의식적으로 집중하지 않으면 자신이 찾은 디자인을 '당연한 것'으로 여겨 지나치기 쉽습니다. 당연한 것에 대해서는 기록하지 않기 때문에 어떻게 '더 나은' 디자인을 찾았는지 알기 어렵습니다. 제약 조건을 만들어 최대한 단순한 디자인 과정을 통해 어떤 방식으로 목적을 달성하기 위한 적합한 디자인을 찾아 가는지 기록했습니다.
서체 중심 앱 로그인 화면 디자인
문자는 강한 힘을 가지고 있습니다. 다른 어떤 방식보다 빠르게 의도를 전달할 수 있고 한정된 문화권 내에서는 가장 정확하게 의미를 전달할 수 있습니다. 오래전부터 기억을 기록하고 소통하기 위한 수단으로 다양한 공간에서 사용됐습니다. 울퉁불퉁한 양피지, 깔끔하게 가공된 종이, 커다란 컴퓨터 스크린, 스마트폰. 이제는 동전만 한 크기의 스마트와치까지 나왔습니다. 디자이너는 문자가 나타나는 공간과 성격에 따라 어떤 형태가 목적을 달성하는데 적합한지 고민했습니다. 그러한 고민에 따라 다양한 서체가 탄생했습니다.
서체는 긴 역사 동안 인쇄물을 중심으로 발전했습니다. 서체의 목적이 "읽는 것"은 당연했습니다. 하지만 우리의 행동에 따라 반응하는 스크린이 등장하였고 서체에 대한 새로운 이해가 필요했습니다. 읽히는 것 이외의 목적을 가진 서체는 무엇일까요? 읽히는 것 이상의 기능을 가진 서체를 이해하기 위해 현재 우리가 가장 많이 사용하고 있는 스마트폰 앱의 로그인 화면을 디자인했습니다.
디자인 과정
Purpose: 목적에 따라 다른 서체 디자인 분석
Condition: iOS 6+ 스크린 화면, Source Han sans
1. 모든 것이 동일한 서체
서체에 대한 분석을 위해 일반적인 레이아웃으로 배치. 모두 동일한 서체로 '로그인' 단계에서 사용자에게 필요한 것들을 일반적인 형태로 배치.
2. 서체들의 기능에 따라 정리
각 부분의 목적이 무엇인지 명확하게 정하고 서체 디자인으로 요소를 구분. 눈에 띄어야 함, 읽혀야 함, 액션 해야 함을 단순한 타이포그래피 방법인 서체의 굵기와 대문자, 소문자로만 먼저 구분.
-LOG IN
두껍게, 대문자
전체를 대표하는 문자로 현재 무엇을 위한 화면인지 정확하게 알려주기 위해 나머지 요소들보다 잘 보일 수 있도록 표현.
-youremail@email.com
-Password
얇게, 소문자 위주
사용자가 작성해야 하는 부분으로 작성하기 전의 안내문과 작성한 후 자신이 적은 정보가 정확하게 읽히기 위해 일반적인 글처럼 첫 글자가 대문자이며 나머지는 소문자로 표현. 이메일의 경우 자신의 이메일이 표현되는 것과 동일하게 표현.
-LOG IN
두껍게, 대문자
사용자가 해야 하는 액션을 모두 마친 뒤 마지막으로 행해야 하는 요소로 가장 눈에 띄고 터치해야 함을 알려줘야 함. 타이포그래피로는 터치해야 함을 알려줄 수 없어 가장 눈에 띄는 방법을 적용. (액션을 알려줄 방법 필요)
-*Forgot password?
얇게, 소문자 위주
5글자 이상의 긴 글로 사용자가 무엇을 의미하는지 읽기 쉽도록 일반적인 글로 표현. 터치 시 비밀번호를 찾는 페이지로 넘어가는 것을 타이포그래피로 표현이 어려움.(액션을 알려줄 방법 필요)
3. 각 요소의 상태를 표현
앞서 정한 기준들을 넘지 않는 선에서 사용자의 피드백에 따라 변하는 상태를 표현.
-LOG IN
사용자가 읽어야 하는 요소.
사용자 피드백이 적용되지 않기 때문에 움직임 및 상태 표현 없음
-youremail@email.com
-Password
사용자가 터치해야 하는 요소. 사용자가 읽어야 하는 요소
사용자가 입력한 것은 투명도 100%으로 표현 입력이 필요한 상태는 투명도 50%로 표현해 무엇을 했고 무엇을 해야 하는지 알려줌
-LOG IN
사용자가 터치해야 하는 요소.
다른 요소보다 두드러지게 보이기 위해 명쾌하게 표현. 누르기 전, 누른 상태, 누른 후 상태를 관용적으로 표현
-*Forgot password?
사용자가 터치해야 하는 요소.
가장 중요한 액션인 LOG IN을 할 수 없을 때 해야 하는 액션으로 다른 요소보다 눈에 띄지 않게 표현하고 관용적인 링크 표시를 따름 ( * 의 사용과 밑줄)
4. 각 요소를 서체 이외의 요소로 의미 강화
앞서 정한 조건들을 지키면서 각각의 의미에 적합한 관용적 디자인 요소들 추가
결론
목적에 따라 요소들의 성격을 나누고
비슷한 목적을 가진 요소는 항상 같은 성격으로 표현해야 한다.
기록 결과 앱에서 쓰이는 서체 종류는 액션을 유도하는 서체, 읽히기 위한 서체, 전체를 대표하기 위한 서체였습니다. 사용자의 뇌가 이것이 어떤 용도인지 확실하게 알 수 있기 위해 각 요소는 다른 요소와의 분명한 차이가 필요했습니다. 많은 요소를 적용하면 서체 간의 차이를 찾기가 쉽지 않아 최대한 서체의 변화만을 이용했습니다. 그 결과 단순히 앱 스크린을 '그림'으로 보았을 때, 요소가 하나로 보이지 않아 심미적인 균형은 그다지 뛰어나지 않은 결과물이 되었습니다. 하지만 사용자가 전체를 훑어보고 나서 '내가 전에 썼던 거랑 비슷하네'라고 생각하며 지금 자신이 원하는 것에 도달하는 기능적인 측면은 강하게 표현되었습니다. 스케치, 프레이머 등의 툴에서 제공하는 기본 템플릿을 사용해 디자인 골격을 만든 뒤 앱의 스타일을 입히기 전에 각 요소가 어떻게 하면 더 잘 기능할 수 있을지 고민할 수 있는 과정이었습니다.
