[내일배움캠프] Day 14 - 역설계, 디자인 클론

---

 

[수업 목표]

• 다양한 화면들을 놓고 역으로 분석하는 과정을 통해 디자인 의도를 추론해볼 수 있어요
• 클론 디자인을 통해 UI를 분석적으로 관찰하고 UI를 설계하는 패턴에 익숙해질 수 있어요

---

 

📌 역설계, 역기획(Reverse Engineering)

원래 제품이나 프로그래밍에서 제품을 놓고 도면이나 설계도를 역으로 설계해내는 방식

지금은 대상을 체계적으로 분석해 원리나 중요한 규칙을 찾아내는 접근법이라는 뜻으로 확장돼 분야를 가리지 않고 사용

 

역설계에서 꼭 고려할 점

1. 디자인의 이유에 집중하기
   • 단순히 "예쁘다"가 아니라 왜 이런 방식으로 디자인했을까를 생각
   • UI뿐만 아니라 사용자의 행동을 유도하기 위한 UX 전략도 고민
2. 유사점과 차이점 관찰하기
   • 여러 서비스의 공통점과 차이점을 비교
   • 어떤 결과가 있었을 지, 나라면 어떻게 해볼 수 있는 지, 비슷한 기능인데도 다른 디자인 방식을 사용했다면 그 이유를 추측
3. 핵심 사용자 행동에 집중하기
   • 모든 서비스에는 사용자가 반드시 해야 할 행동이 있음
   • 커머스 서비스라면 구매, 소셜미디어 서비스라면 소통이 핵심 행동

 

역설계 과정 따라가기

1. 도메인 및 레퍼런스 서비스 선정
   먼저 내가 디자인할 서비스의 도메인(서비스 카테고리) 을 정리
   그런 다음 대표적인 서비스를 5~10개 정도 찾기
   너무 많으면 정리하기 어렵기 때문에 적당한 개수를 유지하는 것이 좋음
   예시 )
   • 금융: 토스, 뱅크샐러드, 카카오뱅크, 네이버페이
   • 패션 커머스: 무신사, 지그재그, 에이블리
   • 배달 서비스: 배달의민족, 쿠팡이츠, 요기요
   • 숙박: 여기어때, 야놀자
2. 분석할 요소 정하기
   일반적으로 전체 제춤과 과정을 다 분석하지만, 특정 부분만 분석하는 것도 가
   예시)
   • 장바구니에 담은 상품이 없을 때 구매로 유도하는 과정
   • 메인 화면 가장 첫 화면의 배너 높이 비교
   • 계좌 잔액을 보여주는 화면 구성 방식 비교
3. 조사 대상 화면 준비
   직접 캡처 또는 레퍼런스 서비스 이용
   Mobbin, wwit.design, gdweb, uibowl.io 같은 레퍼런스 수집 사이트에서 다양한 서비스를 쉽게 확인
4. 비교·분석한 내용을 정리하기
   여러 화면을 비교한 내용을 피그마(Figma) 에 정리
   자유로운 형식으로 정리하되, 나중에 참고하기 쉽도록 시각적으로 정리
   이미지 크기는 모바일 화면 사이즈에 맞게 줄여서 보기

 

📌 클론 디자인

클론 디자인(Clone Design) 은 Clone(복제하다) + Design 이라는 뜻

다른 서비스의 디자인을 따라 만들어보며 UI 규칙과 스타일을 분석하는 훈련 과정

 

클론 디자인과 역설계의 차이

클론 디자인은 역설계와 유사한 개념이지만, 초점이 조금 다름

• 역설계는 UX 전략과 사용자의 행동을 유도하는 방식을 파악하는 과정
• 클론 디자인은 UI 요소와 디자인 규칙에 집중해 어떤 스타일 가이드를 기반으로 만들어졌는지를 알아내는 과정

 

클론 디자인의 장점

클론 디자인은 UI 디자인의 기본기를 탄탄하게 만들어주는 최고의 훈련법

1. 디자인 시스템과 스타일 가이드 파악
   • 잘 만들어진 서비스의 UI 규칙을 역으로 추적하며, 디자인 시스템과 스타일 가이드를 이해할 수 있음
2. UI 디자인 감각 향상
   • UI 디자인이 익숙하지 않을 때, 다양한 UI를 직접 따라 그리며 크기, 간격, 컬러, 폰트 사용에 대한 기준점을 잡기 좋음
3. 다양한 UI 패턴 체험
   • 여러 서비스를 클로닝하다 보면 다양한 UI 패턴과 디자인 트렌드를 자연스럽게 체득할 수 있음

 

클론 디자인 과정 실습하기

 

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

먼저 디자인할 서비스를 정하고, 역설계와 함께 진행한다면 역설계에서 분석한 서비스를 그대로 클로닝해보는 것이 좋음

예시)

• 토스: 홈 화면 → 송금 → 계좌 선택 → 송금 완료
• 인스타그램: 홈 화면 → 프로필 → 피드 → 댓글
• 무신사: 홈 화면 → 상품 상세 → 옵션 선택 → 장바구니

💡 팁

• 화면은 한두 장만 있어도 충분할 수 있지만, 서비스의 전체적인 스타일 가이드와 UI 요소 사용 방식을 더 잘 파악하기 위해 여러 화면을 준비하는 것이 좋음
• 안드로이드 캡처 이미지는 가로 길이를 360px, 아이폰은 375px 또는 390px로 맞추면 UI를 1배수 크기로 확인하기 쉬움

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

디자인을 시작할 때는 전체적인 레이아웃 규칙부터 파악

1. 위에서부터 영역의 높이, 간격, 좌우 여백 등을 체크
2. 4배수 단위로 간격이 설정된 경우가 많으니 주의 깊게 관찰
3. 간격이나 여백 측정은 직접 사각형을 그려보며 재는 방식이 간단하고 효과적

예시

• 무신사 앱의 경우 대부분의 간격이 4px 배수 단위로 이루어져 있음
• 이런 규칙을 발견하는 것이 클론 디자인의 핵심

3. 세부적인 UI 따라하기

전체 레이아웃을 파악했다면, 이제 세부적인 UI 요소들을 추적하며 직접 따라 그리기

1. 배색, 폰트 규칙, 아이콘 스타일 등 세부적인 요소까지 추론
2. 큰 덩어리부터 세밀한 부분으로 좁혀가며 작업하는 것이 효과적
3. 서비스에서만 사용되는 특수한 아이콘은 임시로 대체

💡 팁

• 빠르게 UI를 따라 그리며, 규칙이 어디까지 적용되는지 확인하고 다르게 처리된 부분은 왜 그런지 추론

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

클론 디자인 과정에서 찾아낸 UI 패턴과 규칙이 어느 정도 명확해졌다면, 이를 스타일 가이드 문서로 정리

스타일 가이드는 나만의 디자인 기준을 정리하는 데도 큰 도움이 됨
물론 모든 규칙을 찾아내는 것은 어렵지만, 발견한 만큼 정리

 

 

---

 

[과제]

 

📝 숙제 1 : 주요 화면 비교하고 이유 찾기

쿠팡, 올리브영, 아이디어스, 오늘의집, 에이블리

1. 공통적인 요소

1) 상단 네비게이션 바

• 구조: 로고, 검색창, 카테고리 또는 탭, 개인화 메뉴(로그인, 알림, 장바구니 등) 배치
• 특징: 직관적이고 빠르게 원하는 상품에 접근할 수 있도록 돕는 역할
• 이유: 사용자의 탐색 효율성 극대화 → 사용자가 더 오래 머물고, 빠르게 상품을 발견할 수 있도록 함

2) 이미지 중심의 비주얼 콘텐츠

• 메인 배너: 프로모션이나 이벤트 중심의 슬라이더 배너 배치
• 상품 리스트: 세로 스크롤 방식으로 상품을 이미지 카드 형태로 나열
• 이유: 시각적 정보를 빠르게 전달하여 상품의 매력을 강조하고 클릭을 유도하기 위함

3) 개인화 추천 영역

• 구성: 최근 본 상품, 개인 취향 기반 추천 상품 제공
• 이유: 고객 맞춤형 경험 제공을 통한 구매 전환율 증가

2. 공통된 콘텐츠 영역

1) 프로모션 및 이벤트 배너

• 시즌별 할인, 특별 기획전, 신상품 안내 등 주요 이벤트 노출
• 사용자가 가장 먼저 눈에 띄는 위치에 배치해 클릭 유도

3. 서로 다른 서비스에서 유사한 디자인이 왜 생길까?

1. 사용자 경험 최적화
   • 다섯 서비스 모두 e-commerce(전자상거래) 서비스로, 빠르고 편리한 상품 탐색과 구매가 최우선 과제
   • 사용자들은 이미 익숙해진 UI/UX 패턴을 선호하므로, 동일한 사용자 기대를 충족하기 위해 유사한 디자인이 반복적으로 채택됨
2. 트렌드와 디자인 표준화
   • 모바일 중심 UX 트렌드 (세로 스크롤, 이미지 중심 카드형 배치)와 Material Design, iOS Human Interface Guideline 등 디자인 가이드라인의 영향
   • A/B 테스트와 데이터 기반 최적화 과정에서 유사한 결과가 나오는 경우가 많음
3. 경쟁 및 벤치마킹
   • 동종 업계 내에서 경쟁 서비스의 우수 사례를 참고하거나, 특정 기능이 사용자의 반응이 좋으면 이를 빠르게 채택함
   • 공통적으로 사용자 유지와 전환율 최적화를 목표로 하다 보니 유사한 전략을 취함
4. 콘텐츠의 본질적 유사성
   • 다섯 서비스 모두 기본적으로 상품 추천, 검색, 프로모션 안내, 구매 전환이라는 공통된 비즈니스 목표를 지향하기 때문에 콘텐츠 구성에서 유사한 흐름이 발생

---

1. 차별화된 영역

1) 쿠팡 – 속도와 편의성 중심

• ‘로켓배송’ 강조: 배송 속도와 편리함을 최우선으로 배치 (빠른 배송이 핵심 차별화 포인트)

왜 이렇게 구성했을까?

• 사용자는 빠른 배송, 최저가 쇼핑에 대한 기대가 큼.
• 메인 화면에서 바로 검색과 즉시 구매 행동을 유도해 쇼핑 과정을 단축.

핵심 행동 유도: 빠르게 원하는 상품 검색 → 로켓배송 상품 구매 클릭

 

2) 올리브영 – 큐레이션과 뷰티 트렌드 중심

차별화된 요소:

• ‘랭킹존’과 ‘뷰티 매거진’: 최신 인기 제품을 카테고리별로 소개, 신제품 및 캠페인 중심

왜 이렇게 구성했을까?

• 사용자들이 화장품 선택에서 유행과 트렌드에 민감하기 때문에 큐레이션 콘텐츠를 제공해 신뢰도와 흥미를 높임.
• 정보 소비를 통해 자연스럽게 상품을 탐색하고 구매로 연결.

핵심 행동 유도: 트렌드 확인 → 인기 제품 탐색 → 카테고리별 상세 페이지 이동 → 구매

 

3) 아이디어스 – 스토리텔링과 감성적 연결

차별화된 요소:

• 작가 중심 콘텐츠: 작가의 스토리와 제작 과정 강조
• 핸드메이드 감성 콘텐츠: 신뢰성과 개성 있는 스토리를 통해 제품의 가치 전달
• 커뮤니티 기반 피드: 사용자와 작가 간 소통 유도

왜 이렇게 구성했을까?

• 핸드메이드 제품은 차별화된 감성과 신뢰 형성이 중요하기 때문에, 단순한 상품 나열보다 스토리텔링과 작가와의 소통을 유도.

핵심 행동 유도: 작가 소개 → 공감과 신뢰 형성 → 감성적 소비 → 구매

 

4) 오늘의집 – 인테리어 영감 제공 및 커뮤니티

차별화된 요소:

• 커뮤니티 기반 콘텐츠 (사용자 후기, 집들이 콘텐츠)
• 인테리어 영감 섹션: 실사용자 후기와 스타일링 콘텐츠를 메인에 배치
• 실제 공간 이미지 중심으로 상품 추천

왜 이렇게 구성했을까?

• 사용자는 실제 사용자 사례와 스타일링 팁을 통해 자신만의 공간을 꾸미고자 하는 영감을 얻음.
• 커뮤니티를 통해 사용자 간 교류 및 피드백을 유도해 신뢰도와 충성도를 높임.

핵심 행동 유도: 영감 콘텐츠 소비 → 스타일링 아이디어 획득 → 관련 제품 구매

 

5) 에이블리 – 개인화된 패션 추천

차별화된 요소:

• 스타일 추천 및 개인화 피드: 개인 취향에 맞춘 상품을 메인에 노출
• 인플루언서 연계 콘텐츠: 최신 트렌드와 스타일링 제안
• ‘데일리룩’ 중심 이미지 콘텐츠

왜 이렇게 구성했을까?

• 사용자가 패션 선택에서 자신의 스타일에 맞는 추천을 선호하기 때문에 개인화 추천이 중요.
• 인플루언서의 스타일 제안은 트렌드에 민감한 2030 사용자들에게 즉각적인 구매 동기를 부여.

핵심 행동 유도: 개인화 피드 탐색 → 인플루언서 추천 제품 클릭 → 구매

 

2. 차별화된 구성의 이유 – 사용자의 핵심 행동을 유도하기 위해

1. 사용자의 주요 관심사와 니즈 반영
   • 쿠팡: 즉시성, 편의성 → 빠른 배송 상품을 즉각 구매하도록 유도
   • 올리브영: 트렌드 중심 → 최신 뷰티 정보를 제공해 흥미와 탐색 유도
   • 아이디어스: 스토리와 감성 소비 → 작가의 진정성을 통해 감성적 소비로 연결
   • 오늘의집: 실제 사례와 영감 제공 → 인테리어 영감을 통해 관련 상품 탐색
   • 에이블리: 개인화와 패션 추천 → 트렌드와 취향을 반영한 상품 추천
2. 다른 서비스와의 차별화 전략
   • 경쟁 서비스들과의 명확한 구분을 위해 각 서비스는 브랜드 고유의 정체성을 강조하고, 핵심 사용자 행동을 촉진하는 UI/UX를 설계

📝 숙제 2 : 클론 디자인

---

[마무리]

 

앱을 사용하면서 공통된 부분이나 차별화된 부분을 찾아볼 생각은 못했는데 과제를 하다보니까 재밌다

그치만 아직도 내 발목을 잡는건 클론 디자인ㅠㅠ

내일의 내가 하는 걸로!

왜냐면 난 오늘 '하루 5분 UX' 를 읽어야 하기 때문이다ㅋㅋ

책을 받고서 펼쳐보지도 못해서 아예 하루 할 일에 작성을 해놓고 보기로 했다.

보니까 다른 분들은 벌써 완독하신 분들도 있던데 나도 어서 읽어야지

다 읽으면 TIL에 작성해봐야겠다

 

과제 2까지 나름대로 완성

캐치테이블 메인화면 클론 디자인이다ㅠㅠ

어렵다 어려워!!!