brunch

You can make anything
by writing

C.S.Lewis

by UXUI디자이너 데이지 Dec 28. 2022

[UXUX] 화면의 정보 구성 방법

자기소개 부탁드립니다.

앱 혹은 웹서비스는 수많은 정보들을 보여주며, 반대로 유저의 정보를 받아야 한다. 이러한 화면을 설계할 때 어떤 식으로 구조를 설계해야 할까? 화면의 정보 구조는 자기소개와 비슷하다 생각한다.


다음 김땡땡씨의 자기소개를 보자


"저는 나이는 32살, 키는 185cm에 몸무게는 80kg입니다. 취미로 등산 및 헬스를 하고 있습니다. 가족관계는 외동이며 아버지는 공무원이시고 정년퇴임하셨어요. 어머니는 전업주부이십니다. 연봉은 6천만 원 정도고, 서울 5억짜리 아파트 2억 대출 껴서 매매로 보유하고 있습니다. 이성은 대화가 잘 통하고, 자기 관리하는 사람이 좋아요. 나이차이는 3살 차이까지가 적당할 것 같아요."


"UXUI디자이너 OOO입니다. 저는 OO대학교 OO학과를 졸업하였습니다. 직무 분야에서 커리어를 쌓기 위해 많은 노력을 해왔습니다. OO전자 UXUI디자인팀에서 인턴으로 OO업무를 수행했습니다. 또한 OO디자인 공모전에서 입상을 했었습니다."


"저는 서울 잠실에 살고 있어요. 사람들 만나는 것을 좋아하고, 운동을 좋아해요. MBTI는 ENFP고 주량은 소주 1병 정도예요."


모두 다르지만 한 사람의 자기소개다. 하지만 같은 사람의 자기소개여도 상대방에 따라 맞는 내용들이 다르다. 결혼정보회사에 상담을 하러 가거나, 회사 면접에서 필요한 자기소개, 새로운 만남에서 사람들에게 소개를 할 때 모두 다른 내용의 정보를 말한다. 모두가 '나'에 대한 정보인 자기소개지만 지금 상대방이 내게 원하는 정보는 다 다르기 때문이다. 이러한 점은 UXUI에서도 마찬가지이다. 지금 유저가 원하는 정보는 무엇이고, 그 정보를 어떻게 보여줄지를 생각해야 한다. 즉 화면의 목적성에 따라 구조를 짜야한다.




속성 - 무엇을 원하는가

상대방에 따라 나에게 원하는 정보가 다를 수 있다.

나에 대한 정보지만 누구에게 전달하냐에 따라 다르다. 면접 볼 때 면접관들이 내게 내용과, 소개팅에 있어 상대방이 내게 궁금한 내용은 다르다. 내 키는 면접관이 원하는 내 정보가 아니지만 소개팅 상대에겐 중요한 정보다. 내 커리어는 소개팅 상대보다 면접관에게 중요하다.


앱에서도 같은 유저의 정보여도 받고자 하는 내용이 다르다. a 앱에서 원하는 정보와, b 앱에서 원하는 정보는 다르다. 서비스에 따라 회사가 받아야 할 정보만을 유저에게 요구한다.

블라인드의 경우 직장인들끼리의 익명의 소통공간이라는 설정에 맞게 회사 이메일(직장인)만 확인 후 가입을 할 수 있다. 반면 토스의 경우 금융이기 때문에 개인 신상정보 및 정책에 따른 약관 동의까지 거쳐야 가입을 할 수 있다.


블라인드 회원가입 flow

회사인증 - 비밀번호 입력 - 닉네임 입력


토스의 회원가입 flow

이름 - 주민등록번호 - 통신사 & 휴대폰 번호 - 약관동의




대상 - 누가 우선인가

순서에 따라 다른 소개가 이루어진다.

요즘 몇몇 회사들에서 면접 때 MBTI를 물어본다고 한다. 회사 면접에서의 MBTI질문은 본 면접을 진행하기 전 가벼운 아이스브레이킹 정도로 끝나는 반면, 친구들과 MBTI에 대해 얘기를 할 때는 그 주제를 가지고 계속해서 이야기를 이끌어나갈 수 있다. 같은 내용이어도 얼마큼 대화를 진행하는지 차이가 있다.


같은 속성의 앱에서도 핵심 유저가 다르다. 같은 패션 쇼핑몰이더라도 성별 순서가 다르다. 남성 매출이 높으면 남성이 먼저, 여성 매출이 높으면 여성을 먼저 노출한다. 더 많은 매출을 이뤄내는 고객군이 더 중요하기 때문이다.


여성 -> 남성 순
자라, 셀린느
남성 -> 여성 순
아디다스, 언더아머




목적 - 얼마나 중요한가

저 모아둔 돈 OOO원 정도 있어요. 20대 초반 소개팅에 나가 첫 대면에서 말할 얘기는 아니다. 상대방이 지금 나에게 원하는 내용이 아니기 때문이다. 결혼보다는 연애를 목적으로 나오며, 이 때는 이성을 보는데 외형이 더 중시되기 때문이다. 반면 결혼 정보회사에 가입하며 만난 결혼 적정기의 상대방에게는 나의 연봉과 직업, 모아놓은 자산 등이 매우 중요한 문제다. 이러한 같은 내용이더라도 상대방에 목적에 따라 중요도가 달라지게 된다.


같은 기능이라도 앱에 따라 중요도가 다르다. 

인스타그램의 경우 앱의 정체성은 SNS다. 본인이 보여주고자 하는 사진들을 올리며 팔로워들과의 소통을 목적으로 만들어진 app이다. 주목적이 SNS인 만큼 홈 화면에서 바로 팔로잉한 사람들의 사진들을 볼 수 있다.

반면 크림의 경우 리셀이 앱의 정체성이다. 크림 역시 팔로우들이 있고, 그들이 올리는 사진들을 보고 소통할 수 있는 SNS적인 요소가 있지만, 제일 중요한 부분은 아니다. 이처럼 인스타와 크림 모두 팔로워의 사진을 볼 수 있는 기능이지만, 앱에서 차지하는 중요도에 따라 위치가 다르다.


팔로잉한 사람들의 사진을 보는 방법
홈 화면에서 팔로워의 사진을 볼 수 있는 인스타 / 홈 -> 스타일(인기)-> 스타일(팔로잉) 3 depth를 통해 볼 수 있는 크림




무게감 - 어떻게 정보를 보여줄 것 인가

화자와 상대방이 동일해도, 내용의 무게감이 다를 수 있고 그에 따라 어투의 변화가 있을 수 있다.

같은 직장의 상사와의 대화여도 회의를 할 때와, 회식을 할 때의 대화의 무드나 주제는 다르다. 회의에선 조금 딱딱하고 격식을 차린 전문 용어와 정량적인 지표를 가지고 얘기하는 반면, 회식에서는 더 부드럽고 편안한 대화를 하게 된다. 대화의 내용뿐만 아니라 대화의 어투에 있어서도 조금 더 부드러운 차이가 있다.


어떤 어투로 정보를 요청하는지 역시 앱의 성격에 따라 다르다. 동일 앱에서도 기념하여 진행하는 이벤트의 문체와 가입 약정을 설명하는 문체는 다르다.


화면에 따른 토스앱의 문체
같은 토스여도 내용의 무게감에 따라 문체가 다르다.



정보는 각 상황에 맞춰 원하는 내용이 다르다. 앱과 사용자 두 상대방의 입장이 어떤지를 고려해야 한다. 내가 이 화면(혹은 flow)에서 얻어야 할 것은 무엇인지, 목적은 무엇인지, 어느 정도까지 정보를 얻거나 보여줄지를 고려하면서 설계하며 디자인해야 한다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari