[+14] 역설계와 클론 디자인 · UI 디자인 심화

🚩오늘의 키워드

- 서비스 역설계

- 클론 디자인

 

 

😶TODAY I LEARNED

✔️ 피그마 활용 심화 2

 

[1] 서비스 역으로 설계하기

🔹역설계(=역기획)

디자인을 할 때 만들어야하는 결과와 목표에 따른 비슷한 서비스를 찾아보고 참고하는 과정.

 

- 역설계에서 고려할 점

1. 디자인 자체 보다는 이유에 대해 생각하기

2. 유사한 점과 차이점 다각도로 관찰하기

3. 사용자가 해야하는 가장 중요한 행동 중심으로 분석하기 [핵심 행동 찾기] → 어플의 지향점 찾기

서비스	핵심 행동
커머스	사용자의 구매 행동
소셜 미디어	다른 사람과의 소통

 

➡️ 사용자의 핵심 행동을 이끌어 내기 위해 서비스들이 어떤 UI장치와 UX를 사용하고 있는지 찾는 것이 최종 목적!

 

- 역설계 과정

1. 도메인 및 레퍼런스로 삼을 서비스 확인

카테고리를 생각하고, 대표적인 서비스를 5~10개 정도 찾기

금융	토스, 뱅크샐러드, 카카오뱅크, 네이버페이
패션	무신사, 지그재그, 에이블리
배달	배달의 민족, 쿠팡이츠, 요기요
숙박	여기어때, 야놀자
➡️ 연령대 · 성별 등으로 더 세부적으로 나눌 수 있음 ➡️ 최근에는 큰 산업군 자체를 커버하는 수퍼앱의 등장
💡일반적인 업계나 업종에서 예시를 찾으면 비교가 힘듦. 그렇다고 세세한 카테고리로 찾으면 비교군이 적어짐으로 적당한 규모를 찾아내야 함

 

2. 역설계로 어떤 걸 확인하고 조사할 지 정하기

일반적으로 전체 제품/과정을 다 분석, 하지만 특정 구간·요소만 분석하는 것도 가능.

(ex: 장바구니 UX 비교, 계좌 잔액 표시 방식, 메인 화면 배너 높이 비교 등)

 

3. 조사 대상 화면 준비하기

화면을 캡처·녹화하거나 레퍼런스 서비스 활용

(해외 서비스 위주 : mobbin, 국내 서비스 위주 : wwit, gdweb, ui bowl) 

 

4. 화면을 비교하며 분석한 내용 정리하기

피그마, 노션 등 편한 방법으로 다양한 관점으로 분석

이미지의 크기는 모바일 스크린 사이즈로!

 

 

 

[2] 클론 디자인과 규칙 찾아내기

🔹클론 디자인(Clone(복제하다) + Design)

다른 서비스의 디자인을 따라하며 규칙과 스타일가이드를 분석하는 훈련 과정

· 디자인 시스템, 스타일 가이드, 규격, 크기, 형태 등을 파악하여 UI 디자인 규칙을 파악하는 것이 목표

· 빠르게 규칙을 파악하고, 스타일 가이드를 문서로 정리하는 것이 중요함!

💡파악하면 좋은 것 : 폰트 스케일, 컬러 스케일과 전체적인 색상 비중, UI 요소의 크기, 종류, 형태

 

- 클론 디자인 과정

1. 디자인할 서비스 정하기

서비스 하나만 선정, 주요 사용자 흐름을 한 세트로 캡쳐 후 해상도에 맞게 조정

해상도 조정 기준

✅ 안드로이드 : 가로 360px

✅ iOS : 가로 375px / 390px

 

2. 전체적인 레이아웃 규칙 발견하기

위에서 부터 영역의 높이나 간격, 좌우의 여백 등을 파악

 

3. 세부적인 UI 따라하기

큰 부분에서 시작해서 세밀한 부분으로 좁혀 들어가는 것이 파악하기에 좋음

(ex : 상단 앱 바 + 카테고리 ~ 메인 화면 ~ 하단 내비게이션, 3단계)

아이콘과 같은 서비스 내에서만 볼 수 있는 UI들은 다른 것으로 대체해도 됨

 

4. 스타일가이드로 정리하기

찾아낸 패턴들을 바탕으로 규칙성을 찾아 문서로 정리

 

 

 

 

✔️피그마 활용 심화3

 

[1] 배리언츠와 프로퍼티 활용

🔹버튼 컴포넌트 스택(Stack)

팝업, 일반적인 화면 등에서 버튼을 상하나 좌우로 2개 이상을 같이 사용하는 경우

2개씩 묶인 버튼 인스턴스를 하나의 합성 컴포넌트로 활용하는 것

▼ 버튼 스택 컴포넌트 만들기 실습

① 버튼 인스턴스를 2개 만들기

② 버튼 인스턴스 2개를 오토 레이아웃으로 묶기

③ 오토 레이아웃 프레임을 컴포넌트로 만들고, 이름을 Stack으로 변경

④ 스택 컴포넌트에 네스티드 인스턴스 속성 적용

⑤ 스택 컴포넌트에 배리언츠를 추가하고 속성 값을 기본 상하 / 추가 배리언츠 속성값은 좌우로 변경

⑥ 배리언츠, 배리언츠 안의 버튼의 너비 리사이징 옵션을 hug로 변경

 

✅실습 진행

 

🔹버튼 컴포넌트 독(Dock)

화면 하단에 고정된 독 형태로, 실제로 가장 많이 사용되는 버튼 컴포넌트의 형태

💡실무에서는 기기 하단의 인디케이터 요소까지 고려하여 만들어 둔다.

 

▼ 버튼 독 컴포넌트 만들기 실습

① 버튼 컴포넌트의 인스턴스 하나 만들기

② 인스턴스를 오토레이아웃으로 감싼 후, 배경색 지정

③ 상하좌우에 여백을 설정하고, 컴포넌트 지정

 

▼ 버튼 스왑 인스턴스 만들기 실습

① 독 컴포넌트를 선택, Add Property > Instance Swap 선택

② 버튼을 스왑할 것이기 때문에 이름은 Button, 기본값은 만들어 둔 버튼 컴포넌트

③ Preferred Value 옆의 + 아이콘을 선택한 후 버튼 컴포넌트와 스택 컴포넌트를 선택 > 속성 생성

④ 독 컴포넌트 안에 있는 버튼 인스턴스 선택 > 우측 상단 패널 두 번째 아이콘 선택 > Button 인스턴스 스왑 프로퍼티 선택

⑤ 보라색 이름으로 변경되면 정상 적용

 

✅ 실습 진행

버튼 스왑 인스턴스를 관리하는 방법에는 배리언츠로 정리 / 불리언 프로퍼티 / 스왑 인스턴스 등의 기능으로도 만들 수 있다고 하셔서 개인적으로 만들어보려고 시도했다.

배리언츠로 관리와 불리언 프로퍼티 활용의 경우에는 영상을 참고하고 진행하지 않아서 맞게 만들었는지는 모르겠으나

불리언 프로퍼티를 컴포넌트로 만들면 자꾸 복사가 되어서 만들어지고, 안의 버튼을 찾아 클릭해야 하나씩 껐다 켰다가 가능해서 원래 이런건지..ㅠㅠ 알아봐야겠다.

 

 

[2] 포지션

🔹포지션(Position)

실제 개발에서 사용하는 개념으로, 디자인 및 레이아웃을 위한 코드에서 사용(UI의 위치에 대한 속성값)

피그마에서의 포지션은 스태틱, 앱솔루트, 스티키 등 4가지 속성을 사용할 수 있음.

 

🌟 포지션은 사용하는 방법에 따라 UI의 완성도 및 정확성에 큰 차이를 줌

오토 레이아웃을 활용해 레이어 구조를 정확하게 짤 수 있어야 함.

 

 

예를 들면, 빨간 버튼은 전체 화면보다 카드 안과 더 큰 연관이 있음.

디자인을 코드로 구현하면, 카드 안에서의 위치를 고려하여 코드 작성

카드 안에서의 버튼 위치는 곧, 레이어 구조를 의미한다.

 

 

 

 

 

 

- 포지션 속성 이해

속성	의미
스태틱(Static)	· 요소에 아무런 속성값을 주지 않은 가장 기본값
	· 피그마에서는 일반 프레임에 요소를 배치한 것 · 프레임 안에서 자유롭게 움직일 수 있음
픽스드(Fixed)	· 화면 전체를 기준으로 요소를 그 위치에 고정 · 스크롤, 다른 요소에 구애받지 않음
	· 피그마에서는 프로토타입에서 설정 가능 · 피그마 내에서 Fixed 속성으로 따로 구분됨
앱솔루트(Absolute)	· 요소를 감싼 상위 컨테이너를 기준으로 요소가 고정 · 상위 컨테이너가 반드시 오토레이아웃일 때 사용 가능 · 앱솔루트 포지션이 적용 된 프레임은 오토레이아웃 안에서 위치를 자유롭게 움직일 수 있음
	· 피그마에는 오토레이아웃 포지션 안에서 요소 위치를 고정할 때 사용 · 디자인 패널에서 설정, 앱솔루트가 적용된 요소는 테두리에 다른 표시
스티키(Sticky)	· 픽스드와 스태틱을 전환하며 적용되는 속성 · 스크롤 안에서는 스태틱, 스크롤을 넘어가면 화면 상단에 고정
	· 프로토타입 패널에서 설정할 수 있음 피그마에서 구현이 힘들기 때문에 많이 사용하지는 않음

 

 

 

[3] 오버레이와 모달

🔹팝업(Pop-up) : 화면위에 새로운 화면을 띄우는 것

윈도우 팝업 🚨 점점 사용하지 않는 추세	· 새로운 브라우저 창을 띄워주는 방식 · 일반적으로 부르는 팝업의 방식
	· 광고, 악성코드 등을 방지하기 위해 브라우저에서 팝업을 차단 · 새로운 창이 뜬다는 것 자체가 사용자 입장에서 불편
레이어 팝업	· 새로운 창을 띄우는 것이 아닌 현재 화면에서 컴포넌트로 만든 레이어를 하나 더 보여주는 방식 · 일반적으로 모달로 부르는 것들

 

 

🔹모달(Modal)

· UI의 이름이 아닌 UI를 분류하는 기준·속성 중 하나

· 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

(ex : 팝업, 토스트, 바텀시트, 다이얼로그, 사이드 바 등 많은 UI)

💡 실제로 현업 디자이너들도 레이어 팝업과 모달을 같은 뜻으로 혼용하는 경우가 많지만 완벽히 같은 뜻은 아님!

모달의 예시

- 모달 사용시 주의사항

· 사용자를 방해하면서라도 반드시 확인해야 하는 부분, 그만큼 중요한 선택이 필요한 시점에서만 사용할 것.

 

 

🔹오버레이(Overlay) : UI가 화면 위에 중첩되는 속성

(ex : 바텀시트, 플로팅 버튼의 메뉴, 드롭다운 메뉴 등)

💡 오버레이 ≠ 모달, 모달이 필연적으로 오버레이 속성을 갖고 있으나 같은 개념은 아님

오버레이의 예시 바텀시트 / 플로팅 버튼 메뉴 / 드롭다운 메뉴

 

🔹라이트박스(Lightbox) : 모달 뒤의 반투명한 층

 

- 라이트박스 사용시 주의해야할 점

1. 라이트박스는 반드시 써야하는 것은 아님.

· 사용자에게 모달과 배경을 명확하게 분리해주고 집중할 부분을 안내하기 위한 목적

· 라이트박스가 없다면 조작을 잘못하거나 다른 부분을 누를 가능성이 높아지기 때문에 권장사항

 

2. 라이트박스를 누르면 사용자가 취소 또는 뒤로가는 것으로 간주.

· 일반적으로 라이트 박스를 누를 경우 모달을 열기 전으로 되돌려주어야 함

· 다만, 중요한 선택을 해야하는 순간/뒤로 돌아가면 진행 상황이 모두 삭제되는 경우라면 눌러도 꺼지지 않도록 해야 함

 

 

🔹오버레이와 모달, 라이트박스의 관계

· 오버레이가 가장 상위의 개념으로 구분

· 오버레이 > 모달인 것 / 모달이 아닌 것으로 분류

모달인 것 : 라이트 박스를 포함한 UI

모달이 아닌 것 : 중첩은 되어있으나 뒤쪽 화면이 가려지지 않는 UI

 

 

[4] 다이얼로그 컴포넌트

🔹다이얼로그 컴포넌트

· 컨테이너에 해당하고, 오버레이-모달 속성을 가진 컴포넌트

· 사용자의 의사를 묻고 답을 얻을 때 사용함

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

 

- 다이얼로그 컴포넌트의 구조

컨테이너	다이얼로그 안에 있는 요소들을 감싸고 있는 프레임
헤더	다이얼로그의 제목, 부제목(보조내용) 썸네일 이미지나 아이콘, 닫기 버튼 등이 포함되기도 함
액션	다이얼로그의 버튼 버튼이 여러개 들어갈 수도 있음. 버튼 컴포넌트 스택 활용!

 

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

1. 선택지의 유형에 따라 조작법이 달라짐.

· 사용자가 A 또는 B를 선택해야 하는 상황 → 다이얼로그

· 사용자에게 경고 또는 확인 등을 표시할 때 → 얼럿(Alert), 팝업

유형	동작
다이얼로그	라이트 박스를 누르면 다이얼로그가 닫힘
얼럿	사용자가 버튼을 눌러 확인하거나 직접 취소를 눌러야 함
사용자가 반드시 확인해야하는 정보가 아니라면, 토스트(스낵바)를 활용 → 사용자가 선택한 행동의 결과 / 처리 결과를 안내할 때 사용

 

 

 

 

 

HW

[HW 1] 주요 화면 비교하고 이유 찾기

 

[HW 2] 클론 디자인