부엉이 게임 파일럿 ( 4 ) - Figma

부엉이 게임 파일럿 기록 처음부터 보기 : https://helloworld.ai.kr/22

Figma 입문

UI/UX 디자인은 오랫동안 내게 가장 부담스러운 영역이었다.
하지만 1인 개발자로서 반드시 넘어야 할 산이다.

이번 프로젝트를 계기로 Figma를 처음으로 제대로 만져봤다.
내 기준에서 UI 디자인을 잘한다 = Figma를 잘 써먹는다에 가깝다.

Figma는

• 디자이너
• 개발자
• PM

을 아우르는 협업 도구이고, 사실상 업계 표준이다.

---

Figma 핵심 개념 정리

Canvas / Frame / Layer

• Canvas : 전체 작업 바탕
• Frame : 화면 단위
• Layer : Frame 내부의 개별 요소

웹으로 치면:

Canvas → 작업 공간
Frame → 페이지
Layer → DOM 요소

---

Constraints

상위 Frame 크기가 변할 때 요소가 어떻게 반응할지 정의하는 설정.

주요 옵션:

• Left / Right / Top / Bottom
  → 해당 방향과의 거리 유지
• Left+Right / Top+Bottom
  → 프레임 크기에 따라 늘어남
• Center
  → 중앙 유지

반응형 대응할 때 필수 개념이다.

---

Component

재사용 가능한 UI 블록.
개발에서의 클래스와 거의 같은 개념.

구조:

• Main Component : 원본
• Instance : 복제본

특징:

• Main 수정 → 모든 Instance 반영
• Instance에서는 일부만 override 가능

override 가능한 것:

• 텍스트
• 이미지
• Variant 노출 속성

불가능한 것:

• 레이아웃 구조 변경
• 내부 요소 추가/삭제
• 스타일 직접 변경

---

Auto Layout

규칙 기반 자동 배치.
CSS의 display: flex와 거의 대응된다.

핵심 개념:

• Direction : 가로/세로
• Spacing : 요소 간 간격 (gap)
• Padding : 내부 여백
• Alignment : 정렬 방식

Figma에서 레이아웃 작업의 핵심 기능이다.

---

Style

텍스트 스타일, 컬러 스타일을 템플릿으로 관리.

한 번 정의하면:

→ 스타일 수정 시
→ 사용하는 모든 요소가 함께 변경

디자인 시스템의 최소 단위.

---

Variant

같은 역할의 UI를 속성 조합으로 관리.

보통 두 축:

• type : primary / secondary / danger / ghost
• state : default / hover / active / disabled / loading

버튼 컴포넌트를 여러 개 만드는 대신
속성 조합으로 관리하는 방식이다.

---

UI 기본 원칙

1. 같은 정보는 같은 형태

→ 통일감이 곧 세련됨

• 버튼 스타일 통일
• 제목 폰트/크기 통일

---

2. 색은 최소화

초보는 색을 많이 쓰면 망한다.

전략:

• 기본 컬러 1개
• 나머지는 grayscale

---

3. 요소 줄이고 여백 늘리기

UI가 복잡해질수록 기능이 묻힌다.

• 버튼 1~2개
• 텍스트 최소화
• 아이콘 적극 활용

---

4. 레이아웃은 단순하게

초보 기준 안전한 3가지:

• 1열 스크롤
• 2단 리스트
• 카드형 레이아웃

---

5. 간격이 디자인의 70%

핵심 규칙:

• 8pt 그리드 (8, 16, 24, 32)
• 줄 간격은 4의 배수
• Auto Layout 적극 활용

이론은 이렇고, 실제 감각은 계속 만들어야 익혀질 것이다.

다음 글 보러가기 : https://helloworld.ai.kr/26

부엉이 게임 파일럿 ( 5, 완 ) - 성공적인 행사