피그마 인터페이스 설계

---

1. 와이어프레임에 아이콘 넣기

1-1. 준비

<li>

시작 프레임으로 이동합니다. (05-인터페이스/1.아이콘넣기)

</li> <li>

플러그인을 설치합니다. (Iconify)

</li> <li>

순서대로 진행합니다.

</li>

1-2. 아이콘 넣기

<li>

그림과 같이 아이콘을 겹쳐 놓습니다.

</li> <li>

색상 복제 적용: 피그마의 색상 HEX 코드를 복사하여 Iconify의 color 입력 상자에 붙여넣은 후 아이콘을 적용해봅니다.

</li> <li>

하단 탭바의 아이콘도 적용해봅시다. (home, category, cart, search)

</li>

---

2. Flow 제작

화면의 흐름을 시각적으로 표현하는 Flow를 제작해봅시다.

2-1. 준비

autoflow 플러그인을 설치합니다. 무료 버전은 파일당 50개 사용 가능합니다.

2-2. 활용

<li>

플러그인을 엽니다.

</li> <li>

시작 레이어를 선택합니다.

</li> <li>

마지막 레이어를 선택합니다.

</li> <li>

플로우 선이 자동 생성됩니다.

</li> <li>

선 모양은 플러그인 패널을 활용합니다. 연결선을 선택하면 옵션 창이 열립니다.

</li>

---

3. Auto Layout

3-1. 오토레이아웃 적용

<li>

표시된 레이어를 선택 후 속성을 선택하여 조절합니다.

</li> <li>

레이어 선택 후 우클릭하여 표시된 메뉴를 선택합니다.

</li>

3-1-1. 오토레이아웃 옵션 확인

1. 정렬 방향
2. 상하 마진
3. 좌우 패딩
4. 상하 패딩
5. 패딩 값 개별 입력
6. 콘텐츠 정렬

---

3-1-2. 리사이징 옵션 확인

오토 레이아웃은 “자동으로” 레이아웃을 맞춰 주는 기능으로 요소를 공간(프레임)에 맞춰 넣고 정렬하는 기능입니다.

리사이징 옵션은 프레임의 크기 지정 시 기준을 설정하는 것입니다.

1. Hug Contents: 프레임 내의 콘텐츠(하위 요소) 기준
2. Fixed: 무조건 정해진 너비
3. Fill Container: 프레임 기준으로 콘텐츠(하위 요소) 배치

---

3-2. 제약 - Constraints

가변 디자인 제작 시 설정하는 제약 조건입니다. 요소의 위치, 크기를 리사이징할 때 부모 프레임의 기준점을 설정하는 옵션입니다.

프레임 하위의 박스 레이어의 제약 기준을 변경하여 설정해봅시다.

---

3-3. 리사이징

리사이징은 오토레이아웃 상태에서 사용할 수 있습니다.

<li>

레이어 세트를 복사합니다.

</li> <li>

레이어를 선택 후 Shift + A를 눌러 오토레이아웃을 만듭니다.

</li> <li>

마지막 레이어를 선택 후 우측 패널에서 표시된 옵션을 선택합니다.

</li> <li>

한 세트 더 복사 후 Auto Layout으로 만듭니다.

</li>

---

4. 반응형 디자인

4-1. 컴포넌트 만들기

<li>

24x24 #555 의 원 6개를 그립니다.

</li> <li>

Iconify에서 insta, facebook, twitter, figma, ux, design 아이콘을 검색합니다.

</li> <li>

원 위에 배치합니다. (Alt + H → Alt + V)

</li> <li>

컴포넌트로 등록합니다.

</li> <li>

Ctrl + R로 컴포넌트 이름을 변경합니다: icon/kind/color

</li> <li>

컴포넌트를 선택하고 우측 패널의 Combine as Variants를 클릭합니다.

</li> <li>

Property명을 수정합니다.

</li> <li>

Variant 값을 수정합니다.

• color는 gray로 수정
• kind는 컴포넌트 개별 선택하여 해당 값으로 변경

</li> <li>

모든 컴포넌트를 복사 후 이동합니다.

</li> <li>

색상을 수정하고 Variant를 white로 수정합니다.

</li> <li>

햄버거 메뉴와 좌우 버튼도 추가합니다. 새로 그린 후 베리언트(Variant)에 등록합니다.

</li>

---

4-2. PC 레이아웃

4-2-1. PC/Header

• Frame: 1440x1024
• Grid 설정

Header-left

<li>

Frame: Nav / 100% 40px / #d78d9

</li> <li>

Type Tool로 home, work, about, contact를 작성합니다. 작성 시 개별 레이어로 작성합니다.

</li> <li>

레이어 4개를 선택 후 우측 패널에서 수평 여백을 40으로 조절합니다.

</li> <li>

메뉴 텍스트를 그룹으로 묶은 후 그룹명을 변경합니다.

</li>

Header-right

<li>

상단 툴바 → 리소스 → 컴포넌트로 이동 → 제작한 아이콘 인스턴스를 적용합니다.

</li> <li>

인스턴스를 2개 더 복사 후 배치합니다.

</li> <li>

수평 간격은 20으로 설정합니다.

</li> <li>

아이콘 스왑: 아이콘 인스턴스 선택 후 우측 패널에서 kind의 옵션을 다른 SNS로 변경합니다.

</li>

Header-title

<li>

My Design Portfolio 텍스트를 작성합니다.

</li> <li>

폰트를 설정합니다.

</li> <li>

정렬 설정: 상단 레이어로부터 50px 내려옵니다.

</li> <li>

서브타이틀을 추가합니다. (색상: #F2B8A2)

</li> <li>

세로 간격을 맞춥니다.

</li>

모두 선택 후 Header 프레임으로 묶습니다.

---

4-2-2. PC/Features

배경 만들기

<li>

사각형: 1440 x 300 #F1F1F1

</li> <li>

사각형: 1110 x 300

</li> <li>

이미지 불러오기: figma-image의 이미지 중 아무거나 불러옵니다.

</li> <li>

레이어 누적 순서를 확인합니다.

</li> <li>

레이어 두 개 선택 후 마스크를 적용합니다.

</li> <li>

배경 레이어와 마스크 그룹 레이어를 그룹으로 묶은 후 Feature로 변경합니다.

</li>

콘텐츠 블록

<li>

프레임: 370 x 300 (1100/3=370)

</li> <li>

선: 1 x 300 / #fff / 좌측 상단 정렬

</li> <li>

아이콘: 인스턴스를 적용합니다. (64x64)

</li> <li>

하단에 텍스트를 작성합니다.

</li> <li>

icon과 text 레이어 선택 후 Auto Layout → icon-box

</li> <li>

선과 오토 레이어를 선택 후 컴포넌트로 등록합니다.

</li> <li>

인스턴스를 두 개 복사하여 우측에 배치합니다.

</li> <li>

세 번째 인스턴스는 우측 선을 추가합니다.

</li> <li>

인스턴스의 베리언트를 수정하여 아이콘을 변경합니다.

</li>

모든 레이어를 Features 프레임으로 묶습니다.

---

4-2-3. PC/Services

<li>

Design Service 타이틀을 작성합니다.

</li> <li>

Text 툴 선택 후 드래그 → 속성을 설정합니다.

</li> <li>

우클릭 → Plugin → Lorem Ipsum

</li> <li>

타이틀과 본문 간격 20

</li> <li>

문단 하나의 크기: 540 x 120, 문단을 양쪽 정렬로 수정합니다.

</li> <li>

우측으로 문단을 복사합니다.

</li>

Design 프레임으로 모두 묶습니다.

---

4-2-4. PC/Portfolio

Portfolio 프레임 만들기

프레임: 1440 x 525 / #F4F1F1 → [Portfolio]

carousel 프레임 만들기

프레임: 1110 x 335 → [carousel]

타이틀 작성

Features 타이틀을 복사 이동 → Portfolio로 변경, 50px 상단 여백

카드 만들기

<li>

랙탱귤 툴 → 254 x 254 → [photo-box]

</li> <li>

프레임 → 텍스트 툴 → 로렘입숨 → 오토레이아웃 → [text-box]

</li> <li>

두 개의 그룹을 컴포넌트로 만듭니다 → [card]

</li>

콘텐츠 적용

<li>

인스턴스를 4개 적용하여 이미지와 텍스트를 변경합니다.

</li> <li>

카드 좌우의 컨트롤 버튼은 아이콘의 인스턴스를 넣습니다. 레이어 누적 순서는 캐로셀 프레임의 바깥에 배치합니다.

</li> <li>

버튼 제작: 프레임 253x60, more portfolio, 두 개의 레이어를 오토레이아웃으로 묶습니다 → [button]

</li>

프레임 하단 여백 확인 후 마무리합니다.

---

4-2-5. PC/Footer

프레임: 1440 x 335 / #374140 → [Footer]

box1

<li>

프레임: 350 x 200

</li> <li>

텍스트: From the Blog #E35765

</li> <li>

텍스트: #9D9D9D

</li> <li>

텍스트: 2023.01.23 / #9D9D9D

</li> <li>

3, 4를 오토레이아웃으로 묶습니다 → [paragraph]

</li> <li>

5를 복사하여 아래로 이동 후 5와 6을 오토레이아웃으로 묶습니다 → [content]

</li> <li>

paragraph 그룹 하나를 복사하여 붙여넣습니다.

</li> <li>

타이틀과 content를 오토레이아웃으로 묶습니다.

</li>

box2

box1을 복붙합니다. 타이틀 변경: Contact Us. content > paragraph는 한 개만 남기고 삭제합니다.

box3

<li>

box1을 복붙합니다. 타이틀 변경: Subscribe

</li> <li>

프레임: 350x40 / fill: #4F5554 / stroke: #6D6D6D

</li> <li>

텍스트: your name

</li> <li>

오토레이아웃 → [input]

</li> <li>

input 그룹을 복붙 후 텍스트를 수정합니다.

</li>

copyright 프레임: 1440 x 40

---

4-3. 태블릿 레이아웃

PC 프레임을 복붙하고 프레임명을 [TABLET]으로 변경합니다.

4-3-1. Header

1. Nav 너비 768
2. Title 너비 768
3. 수동으로 위치 조정

4-3-2. Banner

인스턴스 세 개 선택 후 폭을 줄입니다.

4-3-3. Design

컬럼의 폭에 맞게 너비를 줄입니다.

4-3-4. Portfolio

1. 레이어의 구조를 변경합니다.
2. carousel 프레임의 속성을 변경합니다.

4-3-5. Footer

레이아웃을 조정합니다.

---

4-4. 모바일 레이아웃

태블릿 프레임을 복붙하고 이름을 [MOBILE]로 변경합니다. width: 360

4-4-1. 레이아웃 그리드 설정

1. 보더 엣지(Border Edge) 설정
2. 컬럼(Column) 설정

4-4-2. Header

원뎁스의 프레임 레이어 너비를 모두 360으로 수정합니다.

Nav

<li>

Nav 안의 레이어를 프레임 밖으로 빼냅니다.

</li> <li>

아이콘 인스턴스를 넣습니다.

</li> <li>

인스턴스 종류를 햄버거로 변경 후 간격을 조정합니다.

</li> <li>

우측에 SNS 아이콘들을 가져와 배치합니다.

</li> <li>

SNS 간격을 조정합니다.

</li>

Title

1. 폰트 크기를 수정합니다.
2. 하위 프레임의 리사이징 옵션을 변경하여 중앙 정렬로 수정합니다.

main-menu

해당 메뉴는 햄버거 아이콘 클릭 시 보입니다. 보이는 디자인을 구현해놓고 인터렉션은 추후 제작합니다.

<li>

main-menu를 mobile 안으로 가져옵니다.

</li> <li>

main-menu의 fill을 #374140으로 합니다.

</li> <li>

오토레이아웃의 설정을 조정합니다.

</li> <li>

레이어 이름을 변경합니다 → [mobile-toggle-menu]

</li>

4-4-3. Banner

Banner의 fill 속성은 삭제합니다. MOBILE 프레임의 길이를 전체적으로 늘인 후 작업합니다.

Features

1. 프레임 너비를 360으로 수정합니다.
2. 내부의 불필요한 그룹은 삭제합니다.
3. 높이 120
4. 3개 복사

feature-box

1. feature-box 인스턴스를 detach 합니다.
2. Line을 삭제합니다.
3. Auto Layout 방향을 row로 변경합니다.
4. 다시 메인 컴포넌트로 묶습니다.
5. 나머지 두 개는 인스턴스를 적용하여 kind 베리언트를 수정합니다.

4-4-4. Design

상단 여백 50. 폰트 사이즈와 줄간격을 조정합니다.

4-4-5. Portfolio

상단 간격 50.

1. carousel 프레임을 중앙으로 이동 후 너비를 328로 조정합니다.
2. 좌우 컨트롤 버튼을 삭제합니다.
3. 여백과 폰트 사이즈를 조정합니다.

4-4-6. Footer

1. box 그룹을 세로 배치합니다. (Footer 길이 늘임)
2. copyright 너비 360 / fontsize: 12, 위치를 아래로 내립니다.
3. box 그룹의 타이틀 fontsize: 22
4. box 그룹 간 세로 간격 30