디자이너 샤론, 성장일기

마감이 다가오는 과제 두 개를 최대한 작업해 보려 했다. 과제하다가 또는 특강을 듣다가 모르는 부분은 적극적으로 튜터님들께 질문드리고, 새로운 것들을 알게 되었다. 특히 실무에서 쓸 수 있는 팁들이라 잘 활용할 수 있을 것 같다. 두 과제 모두 디자인 가이드를 어느 정도 만들어야 한다. 덕분에 프라이머리 컬러와 세컨더리 컬러를 어떻게 결정하는지 또 그에 따라 그레이스케일은 어떻게 만들어야 하는지도 디테일하게 배울 수 있는 하루였다.

작업한 아이콘 개발자에게 배포할 때 유의할 점

• 언그룹 하고 배포하기 - 하나의 프레임 안에 하나의 레이어인 상태로 만들어야 한다. 그렇게 하지 않으면 쉐입 정리 제대로 하지 않고 보낸 것과 마찬가지다. 단, 원본은 나중에 수정할 것을 대비해 따로 정리해 놓는다. (아웃라인 스트로크 (라인 면처리) & 플래튼 Flatten 꼭! = 레이어 여러 개를 합침, 패스로 남김, 개발자가 SVG 추출할 때 오류 방지)
• 유니온 한 다음에 플래튼!
• 컨스트레인트 스케일로 설정
• 아이콘 이름 메타포 기준으로 지어야 중복되지 않음
• 시각적 보정해주기

• 바운딩 박스는 사용안해도 되는 부분,  바운딩 박스랑 그룹을.. 영역을 줌.. 걍 주먹으로 쥐고 있다고 생각하면 된다. 바운딩 박스를 빼면 아이콘 사이즈가 작아진다. 프레임으로 싸면, 사이즈도 가질 수 있고, 배경도 가질  수 있고.. (프레임으로 넣어야 한다. 그룹에 있으면 한계가 있고, 바운딩 박스로 svg 추출할 때  불필요한 코드가 들어간다.)
• 아이콘 배포 기본사이즈는 24X24 (개발자는 이 사이즈만 알고 있으면 된다. 늘이고 줄이고 다 하니까)

화면의 구성과 흐름을 매우 단순하게 만들어 빠르게 공유하는 와이어프레임!!

화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만든 것을 뜻한다.

.

• 와이어프레임 = 선(와이어)으로 그려진 화면.
• 어떻게 만들지 논의하는 과정을 거치고 나면, 본격적인 디자인을 하기 전에 주로 하게 된다.
• 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 부르기도 함.
• 전체적으로 형태와 방향을 먼저 잡는 것.

와이어프레임을 만드는 이유

👪 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 한다.

글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있다. 아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있다.

 🎨 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.

처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 집중하기 어렵고, 디자인 변경이나 수정할 때 빠르게 변경하기 힘들다. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고, 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있다.

⭐ 습관 형성 모델을 반복적으로 실험해 볼 수 있어요

와이어프레임을 만드는 이유 중 가장 중요한 것은, 참여 전략과 북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는 것이 필요하기 때문. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지, 부족한 건 없는지를 빠르게 검증해 볼 수 있다.

와이어프레임을 그리는 법

와이어프레임의 목적은 빠르고 효율적인 커뮤니케이션과 일관된 디자인 방향이다. 최소한의 가독성만 확보 (글씨가 읽혀지면 됨) 하고 서로 이해할 수만 있다면 어떤 방식을 사용해도 좋다.

와이어프레임 규칙 정하기

• 와이어프레임에서 표현할 것과 표현하지 않을 것을 과감하게 고르기.
• 최대한 단순하고 빠르게 그릴 수 있도록 단색의 선을 사용하는 것을 권장.

그리고자 하는 화면 스케치하기

• 최대한 단순하게 그리는 게 핵심
• 시나리오에 필요하지 않은 부분은 과감하게 글자나 단순한 도형으로 대체
• 텍스트의 경우 최대 길이를 가늠할 수 있도록 실제 사용할 내용으로 넣어주면 좋다

와이어프레임의 핵심

세세한 부분들을 그리지 않아도 전체적인 모양과 구조를 이해하는 데는 문제가 없다는 걸 알 수 있다. 이렇게 대략적인 형태를 잡은 상태에서 사용자 시나리오를 테스트하고 논의하다 보면, 시나리오에서 보완해야 할 부분도 찾을 수 있고 앞으로의 결과물이 어떤 형태가 되겠다는 걸 팀원들이 서로 이해할 수 있다.

화면을 선으로 연결하는 이유

와이어프레임으로 만든 화면들을 선으로 연결하는 이유는 화면들이 어떤 관계로 이어져 있는지 파악하기 위함이에요. 디자인과 레이아웃을 단순하게 만들어 각 화면들이 어떻게 연결되어 있는지, 이 화면에서 저 화면으로 이동하려면 어떤 동작을 하게 되는지를 알기 쉽도록 선으로 연결하는 거랍니다!

🔌 플러그인 소개 : Simpleflow
프레임끼리 선으로 연결할 수 있는 플러그인

Learninig Point - 웹과 앱의 차이점을 잘 알고 적합한 UI를 설계하는 것이 중요
URL 페이지 이동 : 앱은 임의로 주소를 입력햇 이동할 수 없는 반면 웹은 주소창에 URL을 입력하면 어디든 접근할 수 있다. 즉, 로그인하지 않으면 볼 수 없는 화면 등에 접근할 수 있다는 문제가 생긴다. 사용자가 잘못된 화면에 접근했을 때, 다시 정상적인 화면으로 돌려 보내줄수 있어야 한다.

대표적인 웹과 앱의 UI 차이 (위에 페이지 이동 포함)

UI는 기능과 목적이 중요하다. 이런 UI에 차이가 있다는 건 다시 말해 목적에 차이가 있다는 뜻이고, 목적에 차이가 있다면 UX에서도 차이가 생긴다.

뒤로가기

• 앱 의 경우, 일반적으로 화면 상단의 아이콘 등 버튼을 눌러 화면을 이동
• 반면, 웹의 경우 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로움

접근할 수 없는 화면에 뒤로가기를 통해 접근이 가능한 경우 결제가 2번 발생하거나 취소가 여러번 되는 등 치명적인 문제가 발생할 수 있기 때문에 이 상황에서 어떤 장치를 마련할 것인지 개발자와 논의해야 함 (뒤로가기 할 때 사용자를 어떻게 못가게 막을 것인지)

주요 메뉴 이동

• 모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치
• 앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 함
• 두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI
• 최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는 걸로 바뀌고 있다 (결국 사용자가 더 편하고, 더 수월하게 제품을 쓸 수 있는 방향으로 수렴한다는 뜻)

바텀 시트

화면 하단에 고정되어 현재 화면과 관련된 옵션이나 메뉴를 제공하는 UI. 다이얼로그와 같은 컨테이너 컴포넌트.

앱에서는 바텀 시트를 다양한 용도로 활용하지만, 모바일 웹에서는 사용하기 까다로움

✅ 웹브라우저의 기본 UI가 숨겨져 있다가 등장하는 과정에서, 하단에 고정된 바텀 시트의 위치를 계속 바뀌게 만들기 때문. 웹브라우저의 하단 탭바가 스크롤에 따라 노출됐다 사라지면서, 바텀 시트의 위치에 계속 영향을 주기 때문에 사용자 입장에서는 바텀 시트를 제대로 사용하기 불편하다.

✅ 앱에서는 바텀 시트를 드래그해서 닫을 수 있지만, 모바일 웹에서는 드래그해서 닫기 어려움 🙄 → 웹 브라우저에서 아래로 화면을 드래그하면 새로고침이 될 가능성이 있어요.

✅ 물론 디자이너가 판단했을 때 사용하는 것이 더 낫다면, 사용해도 문제 없음.

모바일 웹, 바텀 시트 불편 예시 비디오

OS별 차이

📌 운영체제(Operating System; OS)

앱이나 프로그램을 실행하는 배경이 되는 시스템. iOS나 안드로이드도 운영체제의 종류. MacOS나 윈도우는 노트북이나 데스크톱 같은 컴퓨터의 운영체제.

안드로이드 두 가지가 충돌하기 때문에 (이전 화면 가기와 상위 화면을로 가기) 디자이너는 뒤로 가기 버튼 클릭 시 어느 쪽으로 갈 것인지 규정해 주어야 한다.

✅ 앱 심사 가이드라인

웹은 비교적 자유롭지만, 앱의 경우 반드시 앱스토어나 플레이스토어 같은 앱 마켓에 등록해야 사람들이 설치하고 사용할 수 있음. 따라서 앱 마켓에서 제시하는 앱 심사 가이드라인을 따라야 함. 만일 가이드라인에 맞지 않는 부분이 있다면 심사에서 거절 당하는 경우가 있다.

아이폰의 경우, 애플 로그인이 다른 로그인 수단에 비해 덜 중요하게 보이지 않도록 해야 한다.

또한 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함시켜야 한다.
(자세한 건, 애플 앱 심사 가이드 라인 참고)

iOS 홈 인디케이터

아이폰에서 홈 화면으로 이동할 수 있는 UI예요. 다른 UI와는 다르게 화면 위에 있기 때문에 실제 화면과 겹치는 경우가 있다. 이전 아이폰 모델의 경우 홈 버튼이 물리적으로 기기에 있지만, 이후 비교적 최신 모델은 홈 버튼이 없고 대신 홈 인디케이터가 있기 때문에 같은 아이폰 앱이라고 하더라도 차이를 고려해야 한다.

홈 인디케이터가 있는 경우, 하단에 고정된 UI들을 신경 써야 한다.

모달의 개념

컨테이너 컴포넌트 알기 위한 필용한 속성

아토믹 시스템의 원리

원자들을 모아서 하나의 분자를 만드는 개념. 파운데이션 요소로 컴포넌트를 만듦.

컴포넌트를 모아 또 컴포넌트를 만드는 경우도 있다.

 유기체가 되지 못하고 아직도 컴포넌트인 상태. 버튼 컴포넌트에 폰트 스타일, 컬러 스타일, 여백 및 간격, 곡률 등이 합쳐졌음에도 유기체가 아니라 다시 컴포넌트가 됨. 대표적인 예가 '다이얼로그'. (→ 아토믹시스템의 문제) 그래서 합성 컴포넌트라는 개념이 등장하게 됨.

• 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태
• 이런 합성 컴포넌트들은 대부분 특정한 맥락을 담고 있기 때문에, 컨테이너 컴포넌트라고도 불러요.
• 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있어요.

대표적인 컨테이너 컴포넌트 '다이얼로그'

모달 (Modal) 

팝업의 개념 : 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 한다. Pop-up (톡 튀어나온다는 뜻).

팝업의 유형

✅ 일반적으로 팝업이라고 부르는 것과 UI 관점에서 팝업은 차이가 있다. 모달의 개념을 이해하기 위해 팝업을 먼저 알아봐야 함.
✅ 팝업은 현재 화면 위에 새로운 화면을 띄우는 것
✅ 팝업의 2가지 유형 - 윈도우 팝업, 레이어 팝업

윈도우 팝업

• 쓱 처럼 **새로운 윈도우(브라우저 창)**을 띄워주는 방식
• 일반적으로 팝업이라고 부르는 건 이 방식

레이어 팝업

• 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식
• 대부분의 서비스는 이 방식으로 팝업을 보여줌
• 새로운 창을 띄우는 것이 아니라, 현재 화면에서 컴포넌트로 만든 레이어(층)를 하나 더 보여주는 개념.

모달의 개념

웹으로 인스타그램을 접속하면, (로그인 하지 않았을 때) 다음과 같은 화면이 나온다. 이 화면에서, 사용자는 로그인 화면 뒤쪽에 숨겨진 피드 게시물을 누르거나 스크롤 할 수 없다.

뒤쪽에 있는 게시물은 누르거나 스크롤할 수 없다는 걸 어떻게 아는 걸까?

로그인 화면과 가려진 원래의 화면 사이에 있는 반투명한 까만 층이 원래의 화면을 살짝 어둡게 가리면서 ‘지금은 여기는 작동하지 않아’ 라는 걸 알려주고, 로그인 화면에 시선을 집중시킨다.

모달의 개념 :
사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻한다.

실제로 현업 디자이너들도 레이어 팝업과 모달을 같은 뜻으로 혼용하는 경우가 많음. 또 회사마다 팝업을 모달이라고 부르는 경우도 있을 수 있다. (말이 라는 것은 사용하는 사람들의 합의로 이루어지는 것이 때문에 틀리다고 하기 어렵다.) 따라서 디자이너가 팝업과 모달의 차이를 정확히 알고 있어야 가이드라인도 만들 수 있다.

✅ 모달은 치트키다.
디자이너 입장에서 사용하기 편하다. 난감하거나 다루기 어려운 상황을 쉽게 해결할 수 있는 일종의 치트키와 같다. 그래서 남발하는 경우도 있음. (ex: 기능을 유저에게 설명할 때, 설명 없이 직관적으로 알 수 있는 것이 베스트지만 그렇게 잘 설계되지 않는 경우에는 모달을 이용해 사용방법을 알려줄 수 있다 → 기능을 연결하는 징검다리 역할. OR 여러가지 스텝을 나눠서 설명할 때 등등)

모달의 종류

• 모달은 우리가 앱이나 웹을 사용하면서 굉장히 많이 발견할 수 있는 UI들.
• 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있다.
• 대표적인 모달 중 하나가 '다이얼로그'

라이트박스의 UX

라이트박스 다양한 명칭 :
스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등

라이트박스의 사용법

라이트박스는 반드시 써야하는 것은 아니에요.

• 라이트박스는 사용자에게 모달과 배경을 명확하게 분리해주고 집중해야 하는 부분을 안내하기 위한 목적이지, 모달에 반드시 같이 써야 하는 것은 아니다.
• 다만 라이트박스가 없다면 사용자가 봐야 하는 중요한 부분을 발견하기 힘들다보니 조작을 잘못 하거나 다른 부분을 누를 가능성이 높아지기 때문에, 라이트박스는 권장 사항 (이라 쓰고 반강제로 읽는다.)

매우 중요한 선택을 해야하는 순간이라 뒤로 돌아갈 수 없거나, 뒤로 돌아가면 지금까지의 진행 상황이 모두 삭제되는 경우라면 라이트박스를 눌러도 꺼지지 않도록 해야한다. (사용자의 실수로 작성한 내용이 다 사라졌을 때 어떤 결과가 발생할지 유념해야 한다.)

모달 사용할 때, 반드시 써야하는지 고민해 보자!
완전히 다른 접근으로 새롭게 풀어낼 수 있음에도 모달UI (특히 다이얼로그)로만 풀어내려고만 하면
더 나은 디자인을 할 수 있는 기회가 사라질 수 있다.

모달 사용 시 주의사항

모달 판단 기준 :
뒤에 숨겨진 화면의 동작을 할 수 있는지! 즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 X

사용자의 자연스러운 흐름을 방해하고, 사용자가 최종 목적지까지 가는 시간이나 비용을 증가시키기 때문에 모달이 많을 수록 사용자가 불편해할 가능성이 매우 높아진다.

‘사용자를 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점’에 사용해야 해야 한다.

다이얼로그 컴포넌트

시스템 마다 세세하게 차이가 있다. UI는 답이 없기 때문에 잘 만들어진 시스템 여러가지를 놓고 비교하며, "이거는 이런식으로 붙이는 이유가 있고, 저거는 저런 목적 때문에 저렇게 설계가 되었구나"라고 찾아내야 한다. 이렇게 해야 UI를 보는 관점이 깊어지고 제 3의 인사이트를 찾아낼 수 있다.

다이얼로그 컴포넌트 참고하기 :

머티리얼 디자인

우버 디자인 시스템

카본 디자인 시스템

라이트닝 디자인 시스템

다이얼로그 컴포넌트의 정의

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
• 컨테이너 컴포넌트이면서, 동시에 모달 속성을 가진 컴포넌트

✅ 다이얼로그는 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트.
✅ 다이얼로그(dialog)의 뜻은 대화(conversation)예요.
✅ dia(between) + logos(speaking) = dialog(-ue)

✅ 즉, 다이얼로그 컴포넌트는 대화 그 자체라는 뜻. 제품은 어떤 선택을 할 지 묻고, 사용자는 버튼을 통해 답한다.. 사용자가 어떤 선택을 해야 할 때, 제품은 다이얼로그의 형태로 어떻게 할 건지를 물어본다. 사용자는 선택지를 버튼의 형태로 제품에 답변을 준다. 다이얼로그를 쓴다는 건 사용자의 의사를 묻고 답을 얻을 때 사용.

👉🏻 현업에서 모달이라는 말은 실제로 다이얼로그 컴포넌트를 가리킬 때가 많다.

다이얼로그의 구조

컴포넌트 구조의 이름은 만드는 사람들마다 조금씩 차이가 있다. 이름보다는 각 영역이 어떤 기능을 하는지에 초점을 맞추고 비교하자.

1. 컨테이너(Container) - 다이얼로그 안에 있는 요소들을 감싸고 있는 프레임

2. 헤더(Header) - 다이얼로그의 제목, 부가설명 등이 들어간 제목 부분

• 제목(Title, Heading): 다이얼로그의 제
• 부제목(Subtitle, Description, Hint Text): 다이얼로그의 내용을 설명하거나 제목을 뒷받침하는 보조 내용

3. 액션(Action) - 다이얼로그의 버튼 부분

다이얼로그 설계에서 유의할 점

✅ 선택지의 유형에 따라 조작법이 달라진다.

• • 사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 때가 달라요.
  • 일반적으로 전자의 경우를 다이얼로그라고 부르고, 후자의 경우를 "얼럿(Alert)"이라고 불러요.

다이얼로그의 경우에는 라이트박스를 누르면 취소 또는 닫기를 누른 것과 동일
즉, 라이트박스를 누르면 다이얼로그가 닫힘.

반면에, 얼럿Alert의 경우에는 사용자가 반드시 알아야 하는 중요한 서비스 상태와 관련이 깊기 때문에, 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러 닫힘.

✅ 사용자 흐름에서 필수로 거쳐야 할 때 사용해요.

• 다이얼로그는 필연적으로 사용자를 방해함.
• 그만큼 중요한 시점에 쓰거나 반드시 받아야 하는 정보만 받아야 한다.

→ 만약 사용자가 반드시 확인해야 하는 정보가 아니라면 다이얼로그나 얼럿을 피해야 한다.

☘️ 이런 경우에 사용하는 요소로는 토스트(스낵바). 사용자가 선택한 행동의 결과 또는 처리 결과를 안내할 때 사용한다.

다이얼로그 만들기 실무 팁

다이얼로그는 다양한 경우에 사용하기 때문에 내용을 컴포넌트로 미리 만들어 놓기 어려움.. 따라서 헤더와 액션만 컴포넌트로 만들고, 내용 부분만 따로 만들면 유연하게 사용할 수 있다.  (헤더와 액션을 분리해서 만들고, 따로 관리하게 만들어 주어야 한다.)

검색

사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법

💡 좋은 검색 화면이란?
키워드에 대해 사용자가 원하는 결과를 보여줄 수 없을 때는 다른 행동을 할 수 있도록 유도. 추천 콘텐츠를 보여주거나, 다른 키워드로 검색을 유도할 수 있습니다. 자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 함께 찾을 수 있도록 도와준다. 

검색 화면의 종류

1️⃣ 기본 검색 화면

• • 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다른 것에 주목해 보자.
    - 유튜브는 검색을 바로 시작하는 것보다는 추천 컨텐츠를 보고 바로 탐색을 시작하는 게 더 중요한 제품 그래서 검색 버튼이 아이콘으로만 되어 있다. 그에 반면 구글이나 네이버는 '검색이 가장 핵심 기능'이기 때문에 홈화면 전면에 검색바를 두고 있다.
    - 이마트몰은 50:50 또는 30:70 정도로 비중을 가져가고 있다라고도 볼 수 있다. 왜냐하면 이 상품을 찾는 이커머스는 검색으로 찾는 것도 중요하고 제시된 리스트를 통해서 상품을 찾는 것도 중요하기 때문이다. 원하는 상품이 뚜렷한 사용자는 바로 검색을 할 수 있도록 검색바를 제공하고 있다. 그렇기 때문에 유튜브 보다는 조금 더 보이는 형태의 검색바를 사용하고 있다. 
    ✅ 이러한 위계의 차이가 있다는 것을 잘 알고 있자!
    
  • 돋보기 모양의 아이콘으로만 배치한 제품도 있지만, 화면에서 검색창을 아주 크게 전면에 표시한 제품도 있다.

2️⃣  연관 상품 추천 / 연관 검색어 노출

2️⃣  연관 상품 추천 / 연관 검색어 노출

• 검색 화면에서는 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간.
• 탐색을 돕기 위한 요소에는 무엇이 있는지 살펴보기 
  - 연관 상품 추천 : 내가 어떤 상품을 검색하러 들어왔지만 생각하지 않고 바로 카테고리 별로 아니면 공간 별, 추천 키워들 별로, 다시 상품을 탐색할 수 있도록 도움
  - 지그재그 처럼 검색을 하지 않고 바로 최근 사용자가 본 것들을 다시 들어갈 수 있도록 게시
  - (이렇게 검색과 탐색이 함께 이루어질 수 있도록 화면을 구성하는 검색의 디자인 패턴을 참고하고 학습하자)
  - 사용자가 검색을 할 때 연관 키워드를 제시 → 정확한 글자가 떠오르지 않거나 실수로 사용자가 오타를 입력했을 때에도 정확한 정보로 다시 갈 수 있는 길을 제시해 줄 수 있다. (사용성을 높이는 검색 디자인 패턴)
  
  
  

3️⃣  Empty view: 검색 결과가 없을 때

• 사용자에게 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지 고민하기.
• 추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법.
• 유저의 행동이 멈추는 것이 아니라 이어지도록, 다른 행동을 할 수 있도록 유도해 주는 것이 좋다.
• 무신사 : 추천 상품을 보여주며 '지금 당신이 검색한 결과로는 상품이 나오지 않았다'라는 것을 안내하고 혹시나 품절된 상품이어서 검색이 되지 않을 수도 있으니 이런 것들을 해보라고 여러 가지 옵션을 제공해주고 있다.
• 배민 : 빈 화면을 그냥 두는 게 아니라 재밌는 그래픽을 사용해서 '브랜드 아이덴티티'를 보여주고 있다. '다른 검색어를 입력해 보세요'라고 행동을 유도하고 있다.
• 다른 제품들은 어떻게 Empty view를 채우고 있는지 레퍼런스를 학습하면 사용성을 높이는 데 도움 됨

로딩

로딩은 앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면

💡 좋은 로딩 화면이란?
가능한 한 빨리 콘텐츠를 표시. 콘텐츠를 로드 중이고 완료하는 데 시간이 얼마나 걸릴지 명확하게 전달. 로딩 시간이 불가피하게 길어지면 사람들이 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음

로딩의 종류

1️⃣  스피너 아이콘 혹은 애니메이션 활용 

• 데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용을 돕는다.
• 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 사용자에게 알려준다.
• 움직이는 모션이나 애니메이션은 로딩 지속 시간에 대한 사용자의 인식을 낮춰 기다리는 시간을 짧게 느끼게 한다.

2️⃣  프로그레스 바

• (상단 내비게이션이나 타이틀 아래에 붙어서) 현재 상황을 시각적으로 파악할 수 있는 로딩 바.
• 진행 상황을 유저에게 알려 주어야 하는 케이스에서 사용.

3️⃣  스켈레톤 

• 스켈레톤은 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 함.
• 단, 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황이 생기지 않도록 주의. 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현하는 것이 좋다. 

온보딩의 중요성 

시장에 나와있는 앱은 평균적으로 앱 설치 후 3일 이내에 DAU'의 77%가 이탈. 사용자가 제품을 처음 사용하는 순간에 계속 써야 할 이유를 느끼지 못하면 대부분은 떠남.

→ 사용자가 제품에 대한 첫인상을 긍정적으로 기억하고 계속해서 다시 찾도록 하려면 온보딩을 잘 설계해야 함.

온보딩 종류

튜토리얼이 나오는 온보딩 (비추)

앱을 막 설치하고 사용해보려는 사용자의 행동을 제한하고, 흥미를 떨어뜨림. 가능한 제품을 쉽고  직관적으로 만들어서 튜토리얼이 필요없도록 설계하는 것이 가장 이상적. 그게 어렵다면 꼭 필요한 부분에만 제한적으로 사용해야 함.

가치 보여주기 온보딩

제품을 사용하면서 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식

👍 가치를 보여주는 온보딩에 고려하면 좋은 것들

• 온보딩 과정을 보고싶지 않은 사용자는 바로 제품의 홈으로 이동할 수 있도록 skip 기능을 제공
• 캐러셀을 이용하여 사용자가 화면을 넘기지 않아도 자동으로 넘어가도록 구성
• 사용자가 화면을 직접 넘기지 않아도 되는 동영상으로 구성

개인화 설정하기 온보딩 

• 개인화 된 온보딩 : 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방법
• (그 사람의 특성에 맞는 정보를 보여주는 것) 개인화가 핵심 기능인 서비스에서 주로 사용되는 유형

게슈탈트 심리학

눈을 속이는 신비한 뇌의 원리, 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론.

 대상의 의미가 전체의 특성에 따라 달라진다.

왜 게슈탈트 심리학을 알아야 할까?

착시 현상을 생각해보면 사람의 뇌는 대상을 있는 그대로 받아들이지 않는다.
형태의 정보 중에서 필요 없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들인다.

게슈탈트 심리학이 중요한 이유

게슈탈트 심리학은 사용자가 제품을 경험하는 데 영향을 끼친다.

제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대한다.
화면이 기대한 대로 구성되어 있지 않다면 사용자의 몰입이 깨지고 제품을 이탈하는 이유가 될 수 있다.

✅  게슈탈트 심리학의 원리들

유사성의 원리 The law of similarity

크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향
하지만 모양의 그룹화 효과는 크기, 색의 이용한 것보다 훨씬 약함

색상을 사용한 유사 관계 형성은 유사성의 원리 중에서 가장 강력하다.

유사성의 원리 사례

근접성의 원리 The law of proximity

가까운 것끼리 묶어서 지각하려는 경향

여백을 사용한 근접 관계 형성

유사성의 원리에서 알아본 색상을 사용한 유사 관계보다 여백을 사용한 근접 관계가 더 큰 힘을 가진다.

근접성의 원리 사례 - 아마존 북스

• Footer에서 같은 카테고리끼리는 가까이 두고 사이에는 여백을 크게 주어 그룹별로 잘 구분
• 그룹마다 상단에 타이틀을 가까이 두어 그룹마다 어떤 정보가 있는지 빠르게 인지할 수 있도록 

폐쇄성의 원리 The law of closure

공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향

폐쇄성의 원리 사례 - 스포티파이

연속성의 원리 The law of continuance

연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향

연속성의 원리 사례 - 핀터레스트

핀터레스트 홈 화면의 이미지는 크기가 모두 다르지만, 수직선을 만드는 열로 배열되어 있다. 여기서 연속된 세로의 수직 레이아웃으로 인해 사용자는 편안함을 느낍니다. 더불어 사용자가 앱을 위아래로 스크롤 하도록 유도하는 역할도 하죠.

공통성의 원리 The law of common fate

같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향

• 모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느낀다.
• 주로 모션 그래픽에서 자주 사용되는 원리

공통성의 원리 사례

• Netflix를 탐색할 때 영화와 TV 프로그램이 장르나 테마에 따라 가로로 그룹화된다.
• 각 장르나 테마에 따라 썸네일 + 제목의 리스트가 한 방향으로 움직이는 것을 보고 한 그룹이라는 것을 알 수 있다.