Figma로 CGV App 클론하기 - 4(완료)

[CGV App 클론]

• UI
• 프로토타입
• 작업 과정
• 네이밍

 

 

 

Figma로 CGV App 메인 탭 클론 완료

 

 

 

UI 클론

• 홈 탭

좌: CGV / 우: 클론

 

• 씨네톡 탭

좌: CGV / 우: 클론

 

• 예매예약 탭

좌: CGV / 우: 클론

 

• 매점 탭

좌: CGV / 우: 클론

 

• 더보기 탭

좌: CGV / 우: 클론

 

 

 

프로토타입 클론

🔗CGV App 클론

홈 탭

씨네톡, 예매예약 탭

매점, 더보기 탭

 

 

 

클론 작업 과정

 

◆ 프로토타이핑

네비게이션 바 인스턴스에 탭별로 프로토타입 인터렉션을 만들어준다.

불리언 프로퍼티 옵션을 반대로 해주고 또 인터렉션을 만들어준다.

인터렉션이 적용되어 있는 인스턴스를 복제하여 각 탭에 넣어주면 일일히 연결할 필요없이 이동이 가능하다.

 

 

◆ 컴포넌트

컴포넌트 모음

 

 

※ 어려웠던 점

홈 탭 개체 중 무비차트를 포스터형과 리스트형으로 바꾸는 동작을 위해 컴포넌트를 제작하여 사용하려고 하였다.

다만 동작까지 컴포넌트로 적용하고 영화제목 등의 값을 바꾸니 한 유형만 값이 바뀌어지고 동작을 통해 전환하면 값이 적용되지 않은 화면이 나왔다.

▶︎ 만약 프로토타입에 값을 적용해서 보여주고 싶다면 포스터형, 리스트형의 값을 미리 바꾸고 값이 바꿔진 개체들을 연결하는 컴포넌트를 만들어 사용하면 동작도 잘 작동 되고, 값도 잘 적용된다.

인스턴스 사용 시 한 유형에는 값이 적용되지 않음

값을 적용하고 컴포넌트로 제작

 

 

 

네이밍

 

◆ Bar 네이밍

실무에서 사용되는 방식의 네이밍을 적용하였다.

종류	네이밍
시간, 배터리, 신호, Wi-Fi 상태 같은 시스템 상태 정보를 보여주는 영역	Status Bar
앱 로고·검색·알림 아이콘 같은 글로벌 액션이 들어가는 상단 바	Top App Bar
화면 내에서 섹션을 전환하는 상단 고정 메뉴바	Tab Tab Bar
위계상 Top Tab Bar 보조 네비게이션 역할을 하는 메뉴바	Sub Tab Bar
하단 영역 네비게이션 컴포넌트	Bottom Navigation Bar

 

 

 

 

◆ Property 네이밍

CGV App 클론에서 네이밍을 진행하며 GPT를 통해 학습한 네이밍 자료를 정리해보았다.

 

<Boolean Property 네이밍 모음>

 

✅  1. 버튼(Button)

• Leading Icon → 버튼 앞에 아이콘 표시 여부
• Trailing Icon → 버튼 뒤에 아이콘 표시 여부
• Full Width → 버튼이 컨테이너 너비를 꽉 채울지 여부
• Disabled → 비활성화 상태 여부

 

✅  2. 카드(Card)

• Media → 이미지/썸네일 표시 여부
• Header → 카드 상단 영역 표시 여부
• Divider → 구분선 표시 여부
• Actions → 카드 하단 버튼 영역 표시 여부

 

✅  3. 리스트(List / Menu Item)

• Avatar → 아바타/썸네일 표시 여부
• Leading Icon → 아이템 앞 아이콘 표시 여부
• Trailing Icon → 아이템 뒤 아이콘 표시 여부
• Checkbox → 체크박스 표시 여부
• Switch → 토글 스위치 표시 여부
• Divider → 항목 구분선 여부

 

✅ 4. 입력폼(Input Field)

• Label → 상단 라벨 표시 여부
• Helper Text → 보조 텍스트 표시 여부
• Leading Icon → 입력창 앞 아이콘 여부
• Trailing Icon → 입력창 뒤 아이콘 여부
• Required → 필수 입력 여부

 

✅  5. 네비게이션(Tab / Navigation)

• Icon → 아이콘 여부
• Badge → 뱃지 표시 여부
• Divider → 탭 간 구분선 여부

 

▶️  또, 만약 Boolean property와 Instance swap property를 동시에 쓸땐 이렇게 네이밍한다.

• Boolean → Trailing Icon
• Instance Swap → Trailing Icon Type

 

 

<Instance Property 네이밍>

 

✅  실무 표준 네이밍 패턴

1. 단일 아이콘 전용일 때
   • Icon
   • Leading Icon / Trailing Icon
     👉 가장 심플하고 직관적
2. 종류(Type)를 바꿀 수 있을 때
   • Icon Type
   • Leading Icon Type / Trailing Icon Type
     👉 Boolean(Show Icon)과 구분하기 위해 Type 붙이는 게 실무에서 많이 씀
3. 다른 요소에도 적용 가능
   • Badge Type (예: Dot / Number)
   • Avatar Type (예: Image / Initials)
   • Illustration Type

 

✅  버튼 컴포넌트 예시

• Boolean Property → Show Trailing Icon
• Instance Swap → Trailing Icon Type

 

 

<버튼 컴포넌트 네이밍 메트릭스 예시>

텍스트만 있는 버튼	Button / Text	가장 기본
아이콘만 있는 버튼	Button / Icon	라벨 없음
텍스트 + 아이콘(왼쪽)	Button / Text + Icon Left	Leading Icon
텍스트 + 아이콘(오른쪽)	Button / Text + Icon Right	Trailing Icon
텍스트 + 아이콘(양쪽)	Button / Text + Icon Both	좌우 모두 있을 때 (드묾)
아이콘 + 보조 라벨 (FAB 등)	Button / Icon + Label	플로팅 액션 버튼 같은 케이스

 

 

✅  변형(Modifier) 추가 규칙

• Variant (스타일):
  • Button / Text + Icon Right / Primary
  • Button / Text / Ghost
• Size:
  • Button / Text / Small
  • Button / Icon / Large
• State:
  • Button / Text / Disabled
  • Button / Text + Icon Left / Hover

 

 

<조합형 컴포넌트(Composite Components) 네이밍 가이드>

 

✅  1. 원칙

1. Base 컴포넌트 이름은 그대로 유지
   • Button / Text + Icon Right, Text / Heading, Icon / Search 등
2. 조합형은 역할/맥락 중심 네이밍
   • 하위 요소 나열(X) → 실제 UI에서 쓰이는 의미 중심(O)

 

✅  2. 네이밍 구조

[영역] / [역할] (+ [상황])

• 영역: Header, Card, Form, Modal, List 등
• 역할: Title, Action, Item, CTA, Toolbar 등
• 상황(선택적): With Button, With Icon, Expanded 등 변형 상태

 

✅  3. 예시

조합 요소	잘못된 네이밍 (X)	추천 네이밍 (O)
Title(Text) + CTA(Button)	Text + Button / Title + Action	Header / With Action
Section Title + Trailing Button	Text + Button / Trailing Icon	Section Title / With Button
Card Title + Action Buttons	Title + Buttons	Card Header / With Actions
List Item + Icon + Action Button	Item / Text + Icon + Button	List / Item With Action

 

✅  4. 팁

• 사용자 시점에서 이 덩어리가 뭘 하는지 이름 붙이기
• With, Containing 같은 접속사 활용: With Action, With Icon
• 너무 구체적으로 나열하지 말 것 → 협업 시 의미가 모호해짐
• Variants / States는 추가 슬래시(/)로 확장
  • Header / With Action / Expanded
  • Card Header / With Actions / Hover

 

✅  5. 추천 패턴 (Quick Reference)

• Header / With Action
• Section Title / With Button
• Card Header / With Actions
• Form / Submit Section
• List / Item With Action
• Modal / CTA Section

 

 

<그 외의 네이밍>

✅  박스 안에 광고·메시지·공지 등을 넣는 컴포넌트 → Banner

 

• 광고/프로모션 → Banner / Promo 또는 Ad Banner
• 공지/안내 메시지 → Banner / Info 또는 Message Box

CGV App 클론 컴포넌트 - Banner

 

 

✅  텍스트만 있는 카드 / 이미지(사진)만 있는 카드 / 텍스트+이미지가 합쳐진 카드 → Content Card

 

• Content Card (조합형)
  • Variant:
    • Text (글만)
    • Image (이미지만)
    • Text + Image (혼합)
• 속성 (Properties):
  • Boolean: Show Image, Show Text
  • Text: Title, Description
  • Image: Thumbnail

CGV App 클론 컴포넌트 - Content Card

 

 

✅  상품 카드 → Product Card

 

• Product Image (썸네일/대표 이미지)
• Product Title (상품명)
• Product Price (가격)
• Discount Badge (세일, 퍼센트)
• Tag (무료배송, 쿠폰 등)
• CTA Button (장바구니, 구매)
• Product Card / Grid (격자형 진열)
• Product Card / List (리스트형 진열)

CGV App 클론 컴포넌트 - Product Card

 

 

 

 

 

 

 

[회고]

CGV App 클론은 저번 Starbucks App 클론에 이어 두번째 클론이었는데, 이번 클론에선 더 실무와 가까운 방식으로 작업하고자 했다. 컴포넌트와 네이밍(라벨링)에 대한 개념을 같이 학습하며 진행해서 디자인 시스템과 핸드오프 부분의 이해도가 많이 높아졌다. 특이 네이밍을 하며 용어들을 학습할 수 있었고 클론에 네이밍을 적용하자 훨씬 더 효율적으로 컴포넌트들을 찾고, 활용할 수 있어 보였다. 이번 작업에선 UI와 프로토타입을 모두 완성하고 네이밍을 적용시켰는데, 다음 작업에선 네이밍을 적용시키며 작업을 진행해볼 수 있을 것 같다.