[내일배움캠프] Day 24 - UI 클론 디자인

---

 

[수업 목표]

• UI 컴포넌트를 활용하여 화면 디자인을 설계할 수 있다.
• 화면의 구조를 이해하고 클론 디자인을 할 수 있다.

---

UI 클론 디자인

📌 UI 클론 디자인이란?

• 기존 제품의 디자인을 모방하여 학습하는 과정
• 디자인 원칙, 컬러, 타이포그래피, 레이아웃 등을 학습할 수 있음
• 전반적인 UI 구조를 파악하고, 디자인 역량을 키우기에 좋은 연습 방법
• 인기 있는 트렌드를 파악하고, 왜 인기가 있는지 분석할 수 있음

 

UI 클론 디자인의 핵심 포인트

💡 큰 블록 → 작은 블록 순으로 설계하기!

• 페이지 → 컴포넌트 → 엘리먼트 순으로 설계해야 함
• 컴포넌트를 블록처럼 설계하면 재사용성과 유지 보수가 용이

장점:

• ✅ 재사용성: 같은 컴포넌트를 여러 곳에 활용 가능
• ✅ 유지 보수 용이: 한번의 수정으로 전체 UI에 반영
• ✅ 유연성: 추가/삭제/위치 변경에 유리

💡 섹션을 조립할 때, 테트리스 블록처럼 빈틈없이 쌓는 것이 포인트!

 

실습 : 실 서비스 디자인 클론

1️⃣ 홈 화면

• Chip, Section Title 컴포넌트 제작
  • 필터 칩(Filter Chip)과 액션 칩(Action Chip) 두 종류 제작
  • 선택 여부와 아이콘 유무에 따른 다양한 상태를 고려
• Section 구성
  • Filter Chip과 Action Chip을 조합하여 Section 구성
• 홈 화면 완성
  • Status Bar → App Bar → Chip → Section → Navigation Bar 순서대로 UI 구성

 

2️⃣ 목록 화면

• Search Bar
  • 검색어 입력 필드와 버튼으로 구성
• List Item
  • 콘텐츠 썸네일 + 제목 + 액션 버튼으로 구성
• List
  • List Item을 여러 개 배치하여 목록 형태 구현
• 목록 화면 완성
  • Status Bar → Search Bar → List 순서대로 UI 구성

 

3️⃣ 상세 화면

• Action Menu
  • 콘텐츠에 대한 다양한 액션(찜하기, 공유 등)을 위한 버튼 모음
• Tab Navigation
  • 콘텐츠 상세 정보, 관련 콘텐츠 등 탭으로 구분
• 상세 화면 완성
  • Status Bar → Player → Text Area → Action Menu → Tab → 콘텐츠 목록 순서대로 구성

 

---

 

[과제]

UI가 좋아 보이는 제품을 선택해서 클론 디자인해주세요.

당근마켓

 

반복되는 UI 요소를 찾아주세요.

• 주요 화면 3-5개를 캡처해서 큰 영역 → 작은 영역 순으로 화면을 분석해주세요.
• section → module → item의 순으로 반복되는 UI 요소를 찾아주세요

디자인 시스템 을 제작해 주세요. (진행중)

• 컬러, 타이포그래피, 아이콘을 포함한 파운데이션을 만들어 주세요.
• 반복되는 UI 요소를 컴포넌트로 만들어 주세요.

 

주요 UI 화면 3-5개 만들어 주세요. (진행중)

• 디자인시스템에서 정의한 컴포넌트를 활용하여 UI 화면을 만들어 주세요.

 

---

 

[마무리]

 

내일부터는 프로젝트 시작이라니.. 세상 걱정되네ㅎㅎ

큐알도 잊지말고 찍어야지!

 

뭔가 또 팀이 바뀐다는 것과 새롭게 프로젝트가 시작한다는 생각을 종일하게 된다

피그마를 하고있지만 생각이 새 프로젝트에 꽂힘

 

그래도 할건 해야지

클론디자인 진행중이다

순서가 잘못된걸까

화면 하나에 필요한 컴포넌트를 만들면서 진행하게 되는데 이게 맞는걸까...?

 

흠....어려워라...