Daily UI #007 Settings

Daily UI

#007 Settings

 
설정 페이지에서 신경쓸 부분는 기능별로 대분류, 소분류를 잘 구별할 수 있도록 디자인 하는 것이다. 그 구분은 그룹핑으로 해결해 볼 수 있겠다. 폰트의 굵기와 크기로 차이를 두고, 대분류의 제목과 소분류된 기능명에 시각적 계층 차이를 두고 디자인 해서 구별지어준다.

테이블 선과 텍스트 간의 여백도 넉넉하게 둬서 여유를 두고 구분을 분명하게 한다. 설정작업에 벤치마킹한 앱은  H.point, 쏘카, NRC, KT멤버십, 카카오 셀잇, 스타일쉐어, 티스토리 정도다. 이중에도 아쉬운 점이 있다면 폰트 크기였다. 
 
설정은 사용자가 한번 설정하고 오랫동안 다시 변경하지 않는 공간이다. 그리고 신규 / 기존 사용자 누구든 필요할 때 한 번 들어오는 곳이기에 구분이 명확하고, 설정을 쉽게 변경할 수 있도록 단순해야 한다. 그리고 연령대가 정해져 있지 않기 때문에 저시력자와 노령의 사용자를 위해 어느 정도 폰트 크기를 확보할 필요가 있다.
 
또 중요한 것은 기능명도 사용자가 보고 어떤 기능이 변경할 수 있는지 인지할 수 있도록 신경써야 했다. 어느 기능은 설명이 추가로 필요했다. 그래서 전체 틀은 유지하면서 추가 설명용으로 추가 레이아웃 가이드라인을 잡았다. 우선순위를 파악해서 많이 이용하는 설정은 상단에 배치하는 것도 중요 포인트였다. 
 
UI요소로는 라디오 버튼, 토글 스위치, 아코디언 UI가 주로 사용되고 있어 UI 요소에 대한 글도 참고했다. 디자인 작업은 네이버 블로그 설정폼을 H.point처럼 리디자인해 본 것이다.

 
 
 
 

참고

🤖설정 화면, 어떻게 구성하면 좋을까?

Design Collaboration, Version Control & Handoff - Sympli

더 나은 선택을 유도하는 ‘UI요소’ 만들기