#08. UX 관점에서 보는 가독성 원칙
모바일 앱 UI/UX 가이드
안녕하세요. UX 컨설턴트 전민수입니다.
제가 최근 홀릭스에서 365 day 하루도 빠지지 않고 UX 라이브 Zoom 강의를 진행하고 있습니다.
4개 UX 강좌 진행 중에 있습니다.
[Live UX 강좌1] 홀릭스에서 매일 UX Quiz 풀어보면서 자신의 UI/UX 지식의 체크해 보세요~
[Live UX 강좌2] 홀릭스에서 두 달 만에 완성하는 UX 포트폴리오 스터디를 통해 UX 포트폴리오 만들어 보고, 1:1 코칭받아 보세요~
[Live UX 강좌3] 홀릭스에서 UX 리서치 A-Z 기초부터 고급 실력까지 쌓아보고, 1:1 코칭받아 보세요~
[Live UX 강좌4] 홀릭스에서 UX 설계 A-Z 스킬을 쌓아보고, 1:1 코칭받아보세요~
위 모든 Live 강좌에 대해 일주일 무료 체험 쿠폰을 드리고 있으니, 관심 있는 분은 아래 링크를 클릭해 주세요. 더 자세한 Live 강의 커리큘럼 살펴볼 수 있습니다.
가독성은 단순히 정보를 전달하는 것이 아니라 시각적으로 전달된 정보를 사용자가 이해할 수 있도록 구성해야 합니다. UI 모형에서를 이를 가독성이라고 합니다.
모바일 앱에서 가독성 적용 사례는 다음과 같습니다.
중요 콘텐츠 알림 (속보성 콘텐츠, 나의 주요 활동 알림)
사용자 행위에 따른 인터랙션 발생 (현재 메뉴 상태, 현재 과업 단계, 에러 메시지 발생)
정보 전달 (제목 강조, 화면 영역 강조, 글자 크기 조절, 폰트 조절)
강조 색상 적용 (검색 키워드 시각화. 액션 버튼 시각화, 빠른 시각적 피드백)
중요 콘텐츠 알림
속보성 콘텐츠 인지
사용자에게 반드시 알려야 할 속보성 콘텐츠가 있다면 색상 대비 등을 통해 사용자 눈에 잘 띄도록 합니다. 예를 들어 네이버와 Daum 모바일 웹 뉴스에서 뉴스 속보가 발생하면 다른 뉴스 영역에 비해 색상 대비 및 폰트 크기를 키우고 있습니다.
나의 주요 활동 알림
시스템은 사용자가 알아야 되는 사항에 대해 바로 인지할 수 있도록 해당 기능을 시각적으로 구성해 눈에 잘 띌 수 있게 해야 합니다. 예를 들어 페이스북과 카카오톡은 사용자에게 알려야 할 사항에 대해 페이지 하단 메뉴 영역에 숫자로 명시하고 있습니다.
페이스북 하단 영역: Messages 및 Notifications 알림 사용자 행위에 따른 인터랙션 인지
현재 메뉴 상태
시스템은 사용자가 선택한 메뉴를 시각화해 현재 어떤 정보를 조회하는지 직관적으로 알 수 있도록 구성해야 합니다. 네이버 밴드는 현재 사용자가 조회 중인 정보가 어느 위치(메뉴)인지 시각적으로 알 수 있게 구성했습니다.
네이버 밴드: 하단 선택 메뉴(피드) 활성화 현재 과업 단계
사용자가 원하는 페이지에 쉽게 이동할 수 있도록 과업 단계는 직관적으로 인지할 수 있게 구성해야 합니다. AXA다이렉트는 보험료 계산 산출이 어느 단계인지 쉽게 인지할 수 있도록 색상으로 활성화하고 있습니다.
에러 메시지 발생
에러 메시지 발생 시 문구가 눈에 잘 띌 수 있도록 다른 영역에 비해 강조가 되어야 합니다. 예를 들어 카카오택시의 경우 현재 위치를 재확인하기까지 다른 선택을 비활성화 처리하여 오류 메시지를 강조합니다.
하나은행. 오류 메시지 강조 정보 전달
제목 강조
콘텐츠 페이지 상단 영역에 제목을 상시 노출해 사용자가 어떤 콘텐츠를 조회하는지 알 수 있어야 합니다. ‘인스타그램’에서는 사용자가 정보 검색을 할 경우, 어떤 정보를 검색한 결과 값인지 알 수 있게 해시태그 검색어(토마토)가 상위에 직관적으로 명시되어 있습니다.
인스타그램: 페이지 상단에 '검색어(토마토)' 상시 고정 화면 영역 강조
화면 영역 내 강조 부분은 시각적으로 눈에 잘 띄게 해야 합니다. 해외 온라인 강좌 사이트인 Udemy는 강좌 목록 영역에 별점을 눈에 잘 띄게 노출해 강좌에 대한 평판(인지도 등)을 바로 알 수 있습니다.
Udemy 추천 강좌 목록에 별점이 눈에 잘 띈다
글자 크기 조절
연령층을 고려해 콘텐츠 제공 시 글자 크기 조절 기능을 제공해야 합니다. 네이버 뉴스의 경우 콘텐츠 페이지에 우측 영역에 글자 크기 조절 기능을 제공해 가독성을 높였습니다.
네이버 뉴스: 글자 크기 조절 버튼 제공 글자 폰트 변경
본문 페이지에 글꼴 설정(굴림, 돋움, 바탕, 맑은고딕, 나눔고딕) 기능이 제공되어 본문에 대한 가독성을 높일 수 있습니다.
강조 색상 적용
검색 키워드 시각화
검색 결과, 키워드를 한 눈에 인지할 수 있도록 눈에 띄는 색상 등으로 표시하여 눈에 잘 띄도록 해야 합니다. 예를 들면 서울시 정보소통광장의 경우 검색 결과 페이지에서 검색 키워드를 한 눈에 인지할 수 있도록 노란색 색상으로 표시하고 있습니다.
액션 버튼 시각화
액션 버튼은 시각적으로 눈에 잘 띄게하여 사용자의 다음 행동을 유도해야 합니다. 아마존은 Add to Caet 기능을 눈에 잘 띄는 버튼으로 구성했습니다.
아마존: Add to Cart 버튼 인지 여부 빠른 시각적 피드백
화면에 선택 사항이 많은 경우 사용자가 어디를 선택했는지 바로 인지할 수 있도록 빠른 시각적 피드백이 요구됩니다. 예를 들면 CGV는 어디 좌석을 선택했는지 알 수 있도록 붉은색으로 표시해 좌석 선택이 쉽습니다.
추천 VOD UX 강좌
안녕하세요. UX 컨설턴트 전민수입니다.
브런치를 운영한 지 6년이 되었는데 어느덧 구독자 12,000명 되었네요.
여러분의 응원에 힘을 얻어 지금껏 아티클을 가능한 작성 했는데요. 많은 구독자께서 브런치 글을 강의로 제공하면 좋겠다는 의견이 많았습니다. 그래서 과거부터 최신 UX 아티클의 내용을 더 쉽게 전달시키는 목적으로 인터넷 강의 형태로 촬영하여 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.
UX 라이브클래스 패키지를 통해 전체 178여 개 UX 강좌를 하나의 패키지 형태(총 300시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 할인율 98%(정가 990,000원 > 할인가 98,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다. 참고로 매달 선착순 10명 한정 판매하오니 서둘러 주세요~
(라이브클래스 플랫폼 회사 계약으로 인해 매달 선착순 10명만 수강 신청 가능하오니 양해 바랍니다)
PM VOD 패키지 바로가기 >
그러데요~ 전민수 UX 컨설턴트님!
라이브클래스 VOD 패키지 구매 시 어떤 점이 좋은가요? 질문이 많은데요...
첫째. 기존 UX 인강 강의는 무제한 형태고 제공되고 있으나, 최신 UX 트렌드에 맞춰 업데이트되지 않는 경우가 많습니다. 그런데 제가 강의 운영하는 라이브클래스 패키지는 현재 제공된 UX 강의 300시간 외 매달 꾸준히 최신 10시간 이상 VOD 촬영하고 있습니다.
이를 라이브클래스 패키지에 빠르게 업데이트하고 있어, 여러분이 UX 최신 트렌드를 따라갈 수 있고 UX 실력을 쌓아 나아가고, UX 전문가로 성장하는데 많은 도움이 될 것입니다. 치매 걸리기 전까지 라이브클래스 패키지에 매달 10시간 업데이트 예정입니다.
둘째. 라이브클래스 패키지 강의는 UX 프로세스와 방법론을 A-Z 백과사전 형태로 33개 테마 형태로 묶여 있어서, 구글링, 유튜브 등 검색하지 않아도 빠르게 원하는 UX 지식을 얻을 수 있습니다.
앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.
구독자 여러분 감사합니다.
