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

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

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

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

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

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

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

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

스카이스캐너

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

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

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

카카오 셀잇

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

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

스타일쉐어

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

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

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

피들리

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

당근마켓, 원티드

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

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

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

아이폰 기기 설정

삼성 기기 설정

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

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

브런치

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

미디엄

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

포켓

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

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

Written by 🐳재그마스터, 🐥동동

지금 이 시간 뉴스레터를 읽고 계신 여러분께, 몇가지 묻고 싶은 것이 있어요.

앞으로 더 좋은 콘텐츠를 발행하기 위해 딱 5분만 시간내어주시겠어요?

메일을 원하지 않은 분들은 수신거부를 해주시면 감사하겠습니다.
수신거부 Unsubscribe

이 메일은 스티비로 만들었습니다