UI 기초 살펴보기
T아카데미 ui 수업내용 참고
요즘 이게 유행이던데? 하고 적용하는 건 위험하다
버튼이 왜 동그라미일까, 네모일까? 모든 디자인에는 하나하나 이유가 있다
1. 사용성을 고려한 UI 사례
skt smart planner는 필수 값과 선택 값이 존재합니다. 두꺼운 라인은 필수 값, 얇은 라인은 선택 값으로 구분하여 필요한 값을 빠르게 인지할 수 있게 하였습니다. 이것을 개발한 이유를 생각해보면 첫 번째로 초보 직원을 위해서 만들었다는 생각이 들고, 두 번째는 부가적인 것을 한눈에 정리하여 고객이 편리하게 선택할 수 있도록 하였습니다. 고객이 아닌 직원의 입장에서 생각해보면 이 업무의 익숙한 숙련자는 계산기만 있어도 업무가 가능하겠지만, 가입하려는 고객의 입장에서는 한눈에 보기 편하기 때문에 skt smart planner는 고객에게 더 긍정적 역할을 한다고 생각합니다.
2. 기획
"이미지가 무거우면 DB에서 불러오는 시간이 늘어서 사용자 경험이 안 좋아지고, 이미지가 안 좋은데 코딩만 나이스 하게 돼도 사용자 경험이 안 좋아집니다. UX 향상을 위해선 두 가지 모두 필수적으로 고려해야 합니다"
사용자 리서치 방법론 중에서 퍼소나(persona)는 "나"이외에 사용자를 정하고 들어갈 때 유용합니다.
ex) 10대를 위한 sns를 기획한다고 할 때 10대가 기획을 할 수는 없으니 기획자가 사용자를 정해서 진행합니다. 중요한 것은 팀원 모두가 퍼소나를 인지하고 서비스를 진행해야 한다는 것입니다. 퍼소나를 시각화하여 벽에 붙여놓거나 책상에 세워놓기도 합니다.
journey map을 짜는 것도 필요합니다. 검색과정부터 설치하기까지 앞단에 대한 고민도 필요하기 때문입니다. ex) 우리 서비스를 어떻게 찾을까 어떤 경로로 들어올까에 대한 고민, 하지만 데이터가 있다면 데이터를 참고해서 journey map을 그리는 것이 좋습니다.
3. 모바일 환경을 고려한 디자인
1. prototyping, detailed wireframe
ppt 문서로 보기보다는 툴로 직접 작업해서 실제 앱의 사용경험을 해보는 것이 좋습니다. ex) popapp.in
2. task flow 설계 - happy / error / alternative path
happy path를 처음 생각하고 진행한 뒤에 error패스를 찾고 이에 대한 alternative 패스를 제시해야 합니다. ex) 버튼이 이렇게 커도, 누구나 알아볼 수 있는 아이콘일지라도 당연하다고 생각하면 안 됩니다.
유저 테스트를 통해서 error path를 찾아서 보완해야 하고, 개발하기 전에 모든 경우의 수를 찾아야 모두가 편합니다. (특히 개발자)
*초보 기획자가 하는 실수는 happy path만 생각하는 것.
3. 디자이너에게 필요한 능력
문제를 발견하고 시각화하는 능력
여러 개의 답을 발견하고 비교 검증 선택하는 능력
선택한 해결책을 설득하고 제품화하는 능력
= 문제의 발견, 해결, 구현이라는 3단계에 고른 능력이 필요합니다.
4. 앱 이름은 너무 길면 안 됩니다.
ios 공식 기준으로 최대 50자이지만 한 줄 그 이상으로 늘어나면 가독성이 떨어지고 읽기도 어려워집니다.
5. UI는 하나의 버전으로 해도 되지만 GUI는 안드로이드와 iOS 두 가지 버전을 만드는 게 좋습니다.
왜냐하면 back key system 때문인데, ios는 이전 버튼을 만드니까 괜찮은데, 안드로이드는 이전 버튼과 백버튼의 경로가 다를 경우가 있어서 이걸 잘 설계해야 합니다. 기획자가 생각하는 뒤로 가기와 개발자가 생각하는 뒤로 가기는 다릅니다.
6. 상위 버전 기술 3d touch
안드로이드는 롱 탭, ios는 3d터치 구분이 필요합니다. 하지만 3d터치 데이터를 보면 생각보다 사용도가 낮습니다. 그렇기에 이걸 배려할 것이냐 말 것이냐도 정하는 게 좋습니다. iOS 사용자 비율이 높다면 3d터치를 고려할 만 하지만, 개발이 어렵다면 개발자와 상의 후 빼는 게 낫습니다. 하지만 어떤 트렌디하거나 최신 기술을 사용하는 이미지를 얻고자 한다면 넣는 게 좋습니다.
7. 모바일과 데스크톱의 상관관계
네이트온의 경우 온라인 오프라인을 구분하는 기능이 있었습니다. 반면에 카톡을 보면 1이라는 숫자만으로 온라인, 오프라인을 구분했는데요. 네이트온은 pc사용자가 모바일로 넘어오는 것이기 때문에 당연히 온, 오프라인 구분이 필요하다 생각했지만 결론적으로는 필요 없는 기능이었습니다. 왜냐하면 '모바일'환경이기 때문에 사용자가 경험하는 환경이 달라졌고 온, 오프라인 기능은 굳이 필요 없어도 되겠다 라는 '태도'로 변화하고 적응했기 때문입니다. 데스크톱의 환경이 모바일에서는 맞지 않을 수 있습니다.
8. 반응형 웹
사용자가 모바일을 점점 많이 사용함에 따라 불완전한 웹브라우저보다는 API 기반으로 최적화된 모바일 서비스를 원하게 되었습니다. 이러한 추세를 따라 반응형 웹은 대세가 아니게 되었고, 점점 시장과 멀어지게 되었습니다.
4. 모바일 디자인 트렌드
1. simplifying the interface
화면을 최대한 복잡하지 않게 구성한다는 레이아웃 기본원칙에 따라 simplifying the interface가 많이 사용되었습니다. 하지만 심플이 다른 의미로 왜곡되는 경우가 많습니다. 예를 들어보겠습니다.
소금통과 후추통위에 굉장히 심플한 소금통과 후추통이 있습니다. 하지만 직접 명칭을 써놓거나 털어보지 않는 이상 구분은 불가능합니다. 이와 같이 사용자를 한번 더 생각하게 하는 디자인은 심플한 디자인이 아닙니다.
비행기 조종석이 이미지는 어떠신가요. 얼핏 봐도 굉장히 복잡한 것을 알 수 있습니다. 하지만 왜 이렇게 설계되었을까를 생각해보면 비행기 조종석은 복잡한 디자인이 아닙니다. 파일럿의 특성상 빠른 시간에 빠른 결단을 내려야 합니다. 그렇기에 모든 기능을 버튼으로 다 드러내서 바로 반응할 수 있게 설계한 것입니다. 이 기능을 모두 익혀서 익숙해진 파일럿에게는 이 조종석이 직관적이고 심플한 디자인인 것이죠.
2. simplifying the interface - hamburger button
이 심플함에서 나온 두 번째 이슈는 햄버거 버튼인데요, 햄버거 버튼은 메인화면을 제외하고 모든 요소를 이 버튼 안에 넣어 심플함을 강조했습니다. 하지만 이 햄버거 버튼은 새로운 기능이 추가돼도 잘 모른다는 치명적인 단점이 있었습니다. 이와 맞물려 햄버거 버튼은 굉장히 안 좋은 평가를 받게 되었는데, 그 이유는 쓰레기통 역할을 한다는 것이었습니다. 필요 없는 모든 요소를 넣는 버튼이라는 오명을 쓰게 된 거죠.
하지만 이러한 오명을 벗고자 구글에서 햄거버 버튼을 적극적으로 사용했고 이미지가 달라졌습니다. 구글은 메인 요소를 제외하고 적절하게 햄버거 버튼에 부가적인 요소를 넣었는데요, 일관된 디자인을 유지하기 위해서 모든 서비스에 햄버거 버튼을 넣었습니다. 구글에서 나온 서비스를 이용하는 사용자는 햄버거 버튼에 뭔가 있다는 것을 항상 인지하게 되었고 서비스를 이용할 때 쉽게 사용하게 되었습니다. 햄버거 버튼이 무조건 안 좋다는 인식보다는 사용자를 배려하고 잘 사용하는 것에 대한 고민이 필요하다고 생각됩니다.
관련 사례
페이스북
페이스북의 서비스 초기화면(맨 왼쪽)은 첫 화면에 아이콘과 메뉴를 타일 형식으로 나열한 것을 볼 수 있습니다. 시간이 지나면서 사용자가 뉴스피드를 가장 많이 사용한다는 데이터를 얻게 되고 메인에 뉴스피드를 보여주게 됩니다. 가운데 이미지를 보시면 햄버거 버튼이 추가된 것을 볼 수 있습니다. 마지막으로 햄버거 버튼이 불편하다는 데이터를 토대로 탭 기능과 검색 기능을 강조한 인터페이스로 바뀌게 됩니다.
여기서 가장 좋은 디자인은 최근 디자인(맨 오른쪽)이라고 할 수 있습니다. 하지만 중요한 것은 페이스북은 초기에 사용자가 사용할 줄 몰랐다는 것이고 이를 배려한 디자인은 서비스 초기화면(맨 왼쪽)이라는 것입니다. 사용자가 익숙하지 않은 상태라면 심미성보다는 사용성에 대한 배려가 우선이 되어야 합니다. 서비스가 지속될수록 사용자는 적응하고 익숙해지므로 이를 토대로 심미성과 사용성 둘다 발전시켜나가는 것이 좋은 방법이라고 생각합니다.
3. hardware-ish look
하드웨어는 메타포, 질감 등의 look&feel을 좌우하는 방식을 많이 사용합니다. 그 주요 이유 2가지는 아날로그 매체에서 사람들이 느끼는 심리적 안정감과 오프라인에서 경험을 이어가기 때문에 온라인 상황에서 새로 학습해야 하는 부담을 줄여준다는 것입니다.
4. flat design
플랫디자인은 기기가 다양해지면서 사이즈별로 쉽게 대응하기 위해 나온 디자인입니다. 위의 hardware-ish look의 발전된 버전이라고 생각하면 되는데, 사용자가 카메라 아이콘에 노출되고 익숙해져서 실제 이미지처럼 나타내지 않고 아이콘만으로도 구분이 가능하기 때문에 사용 가능한 디자인입니다.
5. layers and depth / blur effect
층을 알려주는 레이어 디자인인데 ios에서 먼저 사용되었습니다. 결론적으로 실질적으로 많이 사용되지 않았고, 최근에는 텍스트를 강조한 디자인으로 또 변화하고 있습니다. 하지만 안드로이드는 어떤 이유 때문인지, 최근부터 층을 알려주는 디자인을 사용하기 시작했습니다.
6. dimensionality
레이어를 이용해 깊이와 차원을 느끼게 하고 '터치해서 알 수 있는' 경험을 제공합니다. z 축을 이용해서 하나의 아이템을 다른 아이템 위에 얹어 보이게 하고 그림자 농도를 적절히 조절하여 사용자가 계층을 이해할 수 있게 합니다.
'이토록 쉬운 스케치' 저자 서한교 입니다.
치앙마이에서 Freelance Designer 그리고 백수로 살아가고 있습니다.
E-Book 링크
종이책 링크
