NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

개발

설정 화면 어떻게 구성할까?

설정 기능과 화면, 왜 중요할까요?

(에디터, 재그마스터) ‘설정’의 사전적 의미는 새로 만들어 정해 줌. 입니다. 우리가 쓰는 대다수의 ‘웹/모바일’서비스에는 ‘설정’ 메뉴가 별도로 자리잡고 있는데요. 중요한 것은 단순 시스템 설정이 아니라 서비스를 내 입맛에 맞춰 더 잘 사용할 수 있도록 하는 역할을 할 수 있어야 한다는 점입니다. 설정 화면을 구성하기에 앞서 서비스가 지닌 주요 기능이나 사용 환경을 고려해야 하는 이유이기도 하죠.

‘브런치와 같은 콘텐츠 제공 서비스’를 예로 들어볼까요? 한 가지 조건을 더 추가 하자면 한국 로컬 서비스, 글로벌 서비스 입니다. 이 경우 가장 중요한 ‘사용 환경’은 접속 하는 국가와 지역의 네트워크 환경입니다. 한국과 인도의 환경은 당연히 다를 수 밖에 없기 때문이죠. 그럼 설정에서 어떤 옵션을 제공해줘야 할까요? 백그라운드 데이터를 와이파이 환경에서만 쓸 수 있도록 하거나, 영상이 포함된 경우 자동 재생을 하지 않는 내용을 고려해볼 수 있습니다.

(에디터, 동동) 처음 스토리보드를 작성할 때, 제게 설정 화면은 배치하기 애매하지만 없어서는 안될 메뉴를 그저 나열하는 곳이었어요. 그런데 다수의 프로젝트를 경험하다보니, 고민이 제법 필요한 페이지라는 걸 깨달았습니다. 많은 사용자들이 서비스를 편하게 사용할 수 있는 설정이기에 메뉴들을 잘 그룹핑해주는 것이 중요하기 때문이죠. 서비스 성격에 따라 구성 메뉴와 디자인도 달라질 수 있습니다.



설정 화면, 어떻게 구성할까요?

1. 설정 가능 범위를 명확하게 보여주기


스카이스캐너는 별도의 설정 메뉴를 두지 않고 프로필 화면 내 설정 기능을 포함시키고 있습니다. 시각적 요소들을 잘 활용하고 있다는 점이 스카이스캐너 설정의 장점인데요. 선호도, 결제, 알림, 지원 등 네 가지 항목을 아이콘과 별도 배경컬러를 활용에 사용자로 하여금 쉽게 구분 할 수 있도록 도와줍니다. 한 뎁스 더 들어가야 하지만, 사용자 입장에선 어떤 설정이 필요한 지 명확하게 인지하고 접근 할 수 있는 구성이기도 합니다. 설정과 긴밀하게 연결된 구성은 아니지만 설정 구성 하단으로 스카이스캐너에 대한 소개 내용을 포함시켜 둔 것도 눈에 띄네요.

스카이스캐너


에디터, 재그마스터의 덧붙임 : 스카이스캐너는 설정 구분을 4가지 카드 형태로 구성해두었어요. 시각적으로 안정감이 있을 뿐만아니라 각 설정 가능 범위를 명확하게 보여줄 수 있다는 장점이 있기 때문인데요. 초기 기획 시 이런 구분을 이후까지 고려하지 않으면 낭패를 볼 수 있어요. 기능 추가 등 업데이트에 따라 설정값이 늘어났는데 4가지 범위 내 포함되지 않는다면 UI 자체를 변경해야 하기 때문입니다. 리스트 형태로 구성할 경우, 화면이 상-하로 길어진다는 단점이 있지만 추가 설정 값을 넣는 것이 어렵지 않다는 장점을 지닌 것도 같은 이유에서 생각해볼 수 있어요.



그리고 커머스 서비스 중 유사한 사례를 살펴볼게요.

대다수의 커머스 서비스는 MY라는 메뉴 안에 계정 설정과 함께 배송지 설정 등을 배치하고 있는데요. 이러한 구조는 MY-프로필 설정-정보변경 이라는 총 3번의 뎁스를 거쳐야하죠.

카카오 셀잇

카카오의 셀잇의 경우, 마이페이지 메뉴 내 설정을 포함하고 있습니다. 계정 설정과 관심상품 설정, 알림 상품 설정을 각각 배치하여 뎁스를 줄이고 편의성을 높인 사례로 살펴볼 수 있습니다.


스타일쉐어는 프로필 페이지 상단에 설정 아이콘을 배치, 진입 시 커머스 내 가장 중요한 계정 설정부터 고객지원, 이용안내, 업데이트 그리고 로그아웃 순서로 메뉴를 구성했습니다.

스타일쉐어

뎁스가 깊어질 수 있는 계정 설정을 세분화, 최상단에 배치하여 필요한 정보만 쉽게 변경할 수 있도록 하고 있습니다. 재밌는 부분은 UX writing 관점에서 메뉴명이 상위 개념이 '계정'이고 하위 개념을 '프로필 수정'이라 표현된 점입니다.

'프로필'은 나와 밀접한 생일, 성별, 프로필 이미지를 변경할 수 있고, 상위 개념인 '계정'에 연결된 SNS, 푸시, 환불 계좌 등을 명확히 분리시켰어요. 같은 개념으로 바라볼 수도 있는 개념이기에 기획 시 함께 살펴보면 좋은 요소라고 생각합니다.



​2. 쉽고, 세부적인 설정 가능하게 하기


피들리

구글이 RSS 서비스를 종료한 뒤, 제가 5년 넘게 꾸준히 쓰는 'Feedly'의 모습입니다. 사이드 메뉴 내 'Settings' 텍스트를 탭 해 설정화면으로 이동이 가능한데요. 다크 모드, 연동, 최근에 읽은 글 등이 모두 별도의 메뉴로 적용 되어 있어 설정 화면은 '글을 읽고 저장하고 관리하는' 측면에 모두 초점이 맞춰져 있습니다. (아래의 브런치, 미디엄 사례와 함께 보시면 더 좋아요!) 스크롤 시 자동으로 읽기 상태로 변경, 디폴트 뷰 설정, 디폴트 정렬값 설정, 웹사이트로 바로 연결, 선호 브라우저 등으로 말이죠. 게다가 화면 전환 없이 팝업 + 라디오 버튼 형태로 각 항목을 쉽게 설정, 수정할 수 있다는 점도 좋았습니다.


당근마켓, 원티드

이제는 중고거래를 넘어 대표적인 동네 커뮤니티로 발돋움하고 있는 당근마켓과 지인 추천을 기반으로 다수의 사용자를 확보한 원티드 두 서비스의 공통점은 토글 스위치를 통해 알림 설정을 쉽게 변경할 수 있다는 점이 있습니다.

당근마켓의 경우, '중요 알림'과 운영자 알림과 같은 '기타 알림'으로 항목을 나누어 사용자가 받아볼 알림의 종류를 선택적으로 변경할 수 있고요. 원티드는 지원 상태와 신규 포지션 알림 등 채용 공고와 연관된 알림의 종류를 세분화하여 설정 기능을 제공하고 있습니다.

에디터, 동동의 덧붙임 : 서비스 내에서 자체적으로 세분화된 알림 설정을 제공해주는 것도 매우 중요한 포인트입니다. 사용자가 디바이스 설정에서 알림을 끄지 않았다면, 운영자 입장에서 필요한 시점의 적절한 알림 혹은 마케팅적인 운영 요소를 통해 서비스에 재방문할 수 있는 기회를 열 수 있기 때문이죠.


아이폰 기기 설정

삼성 기기 설정

iOS와 삼성(AOS 기반) 디바이스의 설정 화면도 빼놓을 수 없는데요. 양쪽 모두 해당 설정에 잘 맞는 아이콘을 활용하고 있어요. 애플은 사운드 및 햅틱에 스피커 아이콘을, 삼성은 소리 및 진동에 스피커 아이콘을 활용하는 식으로 말이죠. 이 둘을 다시 '쉽게 설정 할 수 있게 하기' 관점에서 살펴보면 삼성에 좋은 점수를 더 줄 수 밖에 없는데요. 삼성은 각 항목 하단에 다음 화면으로 넘어가서 어떤 설정을 할 수 있는지 텍스트로 설명해주고 있기 때문입니다. 제조사 차원에서 이런 기능이 중요한 또 하나의 이유는 사용층이 폭넓게 구성되어 있다는 점이에요. 스마트폰은 전 연령대에서 쓰기에 특정 사용자 층이 존재하는 일반 서비스와는 다른 접근 방식이 필요합니다. 그냥 '디스플레이'라고 타이틀만 적어 놓는 것보다 '밝기, 블루라이트 필터, 홈 화면' 등을 설정할 수 있다는 안내를 함께 제공한다면 연령대가 높다 하더라도 조금 더 쉽게 이해할 수 있지 않을까 싶네요!



​3. 서비스 기능과 밀접하게 구성, 사용 환경 고려하기

브런치

브런치는 사이드 메뉴 내 설정 화면으로 이동 가능한 아이콘이 적용 되어 있습니다.(하단) 글쓰기, 작가의 서랍, 통계 등 주요 기능들이 '텍스트'로 구성되어 있는데 알림과 설정만 아이콘으로 적용 되어 있는 점이 눈에 띄네요. 설정 화면으로 진입 시 계정, 알림, 서비스 정보 등 크게 3가지로 나뉘어 있는 모습을 확인 할 수 있습니다. 브런치는 기본적으로 글을 쓰는 사람과 글을 읽는 사람으로 사용자를 구분 할 수 있는데요. 이 둘을 모두 고려한 알림의 세분화가 잘 정리되어 있습니다. 설정 자체가 '알림'에 초점이 맞춰져 있는 것은 좋아하는 작가의 새로운 글을 확인하기 위해 들어오고, 이를 통해 연관 글을 확인하는 과정의 시작이 될 수 있기 때문입니다.


미디엄

브런치와 함께 살펴볼 또 하나의 사례는 '미디엄'입니다. 브런치와 동일하게 사이드 메뉴 내 'Settings'이 자리 잡고 있는데 아이콘이 아닌 텍스트로 적용 되어 있네요. 브런치는 설정 - 앱 정보 내 문의하기와 도움말이 있는 것과 달리 'Help'가 'Settings'와 같은 공간에 적용 된 것도 다른 점! 미디엄은 설정 화면 내 별도 구분이 되어 있진 않습니다. 재밌는 점은 브런치가 알림을 세분화 해 설정 화면 내 토글스위치로 적용된 반면 미디엄은 시스템 설정 화면으로 이동시킨다는 점입니다. 오히려 알림 보다 다크 모드, 이미지 로딩 여부, 백그라운드 데이터 사용 환경 설정 등이 더 중요하게 느껴지는데요. 뉴스레터 초반에 말씀드렸던 것처럼 '사용 환경'을 고려한 배치라는 생각이 드는 지점이기도 합니다. (브런치는 국내에서만 쓰인다고 볼 수 있지만, 미디엄은 꽤 많은 국가에서 사용 될 가능성이 높기 때문)


포켓

다음 사례는 '포켓'입니다. 나중에 읽기의 대표적인 서비스라고 할 수 있는데요. 저는 정보를 수집하는데 있어 '피들리'에는 자주 보는 서비스들을 직접 등록, 구독하고 다른 경로를 통해 알게된 서비스는 포켓에 저장 후 읽고 노션에 정리하는 편입니다. 포켓에서 설정화면으로 이동하기 위해서는 앱 우측 상단 '더보기' 아이콘을 활용해야 합니다. 포켓 역시 '저장된 글'을 확인하는 것이 핵심 기능이기에 이와 관련된 설정값들이 꽤 많이 적용되어 있네요. 일반, 앱 테마, 읽는 중(표현이 좀 어색하지만), 오프라인 다운로드 등 크게 4가지로 나뉘어 있습니다. 미디엄과 마찬가지로 도움말(help)은 별도 메뉴로 빠져 있기에 '어떻게 하면 저장된 글을 더 편하게 볼 수 있을까?'에 대한 답을 여러 형태로 확인 할 수 있어요.

에디터, 재그마스터의 덧붙임 : 설정 화면 자체가 우선순위가 낮은 것은 사실이에요. 다만 사용자가 서비스를 더 잘 사용할 수 있도록 도와주는 역할을 하기에 접근성이 떨어지는 것은 좋지 않습니다. 미디엄과 브런치가 사이드 메뉴 하단에, 포켓이 더보기를 통해 설정화면으로 이동할 수 있도록 한 것도 같은 맥락에서 생각해볼 수 있어요.

댓글 0

팁스터

앱/웹 서비스를 구성하는 요소들에 대한 편집자의 생각과 노하우를 정리하는 뉴스레터입니다.

모바일 앱 다운로드, 어떻게 유도할까?

프로덕트

공유기능, 어떻게 활용하면 좋을까?

프로덕트

1:1 문의, 어떻게 활용하면 좋을까?

프로덕트

오디오 콘텐츠 재생 화면은 어떤 모습일까?

프로덕트

회원가입 완료 화면 구성 방법!

프로덕트

또 하나의 네비게이션, 푸터 구성 방법

프로덕트

당황스러운 상황을 해결하는 404 페이지!

프로덕트

점점 다양해지는 선물하기 기능!

프로덕트

서비스와 사용자의 밀당! 권한 요청 살펴보기

프로덕트

동일한 상황, 어울리는 문구는?

프로덕트

앱스토어 스크린샷 구성 방법!

프로덕트

모바일 앱에 적합한 정렬과 필터는?

프로덕트

봄바람 휘날리며~ 건강 관리 서비스 분석

프로덕트

손이 욱신거리지 않는 에디터 없나요?

프로덕트

아쉽지만, 회원탈퇴 프로세스 분석

기획

우리 서비스에 맞는 리스트 UI는?

디자인

아프리카에서 중고차 구매하기

기획

작심 3일 넘길 수 있는 서비스 파헤치기!

프로덕트

프로필 화면 어떻게 구성할까?

기획

검색 화면 어떻게 구성할까?

기획

팝업 화면 어떻게 구성할까?

기획

많은 정보를 담은 지도 UI는 왜 짜증날까?

기획

햄버거 메뉴는 이제 끝물 아닌가요?

기획

알림이 스팸이 되지 않게 하는 방법!

기획

리뷰 많은 서비스가 되는 방법!

기획

구매의 시작, 장바구니 어떻게 구성할까?

기획

통계 기능, 어떻게 구성하면 좋을까?

기획

스마트오더 서비스는 어떻게 구성할까?

기획

FAQ 화면 어떻게 구성할까?

기획

아이콘, 어떻게 활용하면 좋을까?

디자인

온보딩 화면, 어떻게 구성하면 좋을까?

디자인

회원가입과 로그인, 어떻게 구성하면 좋을까?

개발

독특한 UI, 어떤 사례가 있을까?

디자인

동일한 제품을 각각의 커머스에서 구매한다면?

개발

빈 화면 어떻게 구성할까?

기획

SaaS 가격페이지 어떻게 구성할까?

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.