피그마 기초

동부산CC 앱 리뉴얼 기획서나 포트폴리오에서 사용하는 용어들이야.

1. Cover (커버)

프로젝트의 표지 페이지

들어가는 내용
프로젝트명
로고
메인 이미지
제작자
제작일

예시

DONG BUSAN CC
Website & App Redesign

Premium Golf Experience
2. Brand Story (브랜드 스토리)

브랜드가 추구하는 가치와 방향성

들어가는 내용
브랜드 소개
브랜드 철학
브랜드 목표

예시

동부산CC는 자연과 바다가 어우러진
프리미엄 골프 경험을 제공하는
골프 클럽입니다.

방문객에게 품격 있는
라운딩 경험을 제공합니다.
3. Color System (컬러 시스템)

프로젝트에 사용하는 색상 규칙

예시

Primary

#1F4D3A

Secondary

#F5F3EE

Accent

#D9B26F

Text

#222222

4. Typography (타이포그래피)

글꼴과 글자 크기 규칙

예시
H1
48px
Pretendard Bold

H2
32px
Pretendard SemiBold

Body
16px
Pretendard Regular

Caption
14px
Pretendard Light
5. Components (컴포넌트)

반복적으로 사용하는 UI 요소

예시
버튼
Primary Button
예약하기

Secondary Button
코스안내
카드
코스 카드
시설 카드
이벤트 카드
메뉴
햄버거 메뉴
탭 메뉴
네비게이션
아이콘
예약
위치
전화
회원
6. Home Screen (홈 화면)

사용자가 앱을 실행했을 때 가장 먼저 보는 화면

동부산CC 예시
Hero 이미지

동부산CC

Premium Golf Experience

[실시간 예약]

오늘의 날씨

코스 안내

클럽하우스

멤버십

Footer
포트폴리오 순서 추천
01 Cover

02 Project Overview
(프로젝트 개요)

03 Brand Story

04 Research
(리서치)

05 IA

06 Wireframe

07 Color System

08 Typography

09 Components

10 Home Screen

11 Sub Page

12 Mobile Design

13 Conclusion

이 순서가 학원 과제나 포트폴리오 발표용으로 가장 많이 사용하는 구성이다. 특히 동부산CC 리뉴얼이라면 Home Screen 전에 Color System → Typography → Components를 배치하면 디자인 의도를 설명하기 쉽다.