Note
이 문서는 Figma의 다양한 기능을 활용하여 간단한 사진 뷰어 웹 애플리케이션을 디자인하는 실습 가이드입니다. 지금까지 배운 Figma의 핵심 기능들을 종합적으로 활용합니다.
- Figma의 프레임, 도형, 텍스트, 이미지 기능을 활용하여 UI를 구성합니다.
- Auto Layout을 사용하여 반응형 레이아웃을 구현합니다.
- 컴포넌트 및 컴포넌트 세트를 활용하여 재사용 가능한 요소를 만듭니다.
- 프로토타입 기능을 사용하여 기본적인 사용자 흐름을 만듭니다.
사진 뷰어 웹앱은 다음과 같은 주요 화면과 요소들을 포함할 수 있습니다.
- 메인 화면: 사진 갤러리 (썸네일 목록)
- 사진 상세 화면: 선택된 사진 크게 보기, 이전/다음 버튼, 정보 표시
- UI 요소: 헤더 (로고, 검색창), 푸터, 내비게이션 바, 카드 형태의 사진 썸네일
- 새 프레임 생성: 데스크톱 또는 태블릿 크기의 프레임을 생성합니다.
- 그리드 시스템 설정: Day 2: 여백의 미를 참고하여 컬럼 그리드를 설정하여 레이아웃의 기준을 잡습니다.
- 헤더: 로고(텍스트 또는 간단한 아이콘), 검색창(입력 필드, 검색 아이콘), 사용자 프로필 아이콘 등을 Auto Layout으로 배치합니다.
- 푸터: 저작권 정보, 소셜 미디어 링크 등을 Auto Layout으로 배치합니다.
- 사진 썸네일 컴포넌트 생성:
- 사각형 프레임에 이미지를 채웁니다.
- 이미지 위에 사진 제목, 작가 이름 등을 텍스트로 추가합니다.
- 이 요소들을 Auto Layout으로 묶어 카드 형태의 썸네일 컴포넌트를 만듭니다.
- Day 3: 컴포넌트 (Component)를 참고하여 컴포넌트로 만듭니다.
- 갤러리 레이아웃: 생성된 썸네일 컴포넌트들을 Auto Layout으로 가로/세로로 배치하여 그리드 형태의 갤러리를 만듭니다.
Wrap기능을 활용하여 반응형으로 만듭니다.
- 새 프레임 생성: 사진 상세 화면을 위한 프레임을 만듭니다.
- 이미지 영역: 큰 이미지 영역을 배치합니다.
- 컨트롤 버튼: 이미지 좌우에 이전/다음 버튼을 배치합니다.
- 정보 영역: 이미지 하단에 사진 제목, 설명, 태그, 좋아요 수 등을 배치합니다. 이 부분도 Auto Layout을 활용합니다.
- 메인 화면에서 상세 화면으로 이동: 갤러리의 썸네일 컴포넌트를 클릭하면 사진 상세 화면으로 이동하도록 프로토타입 연결을 설정합니다.
- 이전/다음 버튼: 상세 화면에서 이전/다음 버튼을 클릭하면 다른 사진으로 이동하도록 연결합니다.
- 닫기 버튼: 상세 화면에서 닫기 버튼(X 아이콘 등)을 클릭하면 메인 화면으로 돌아가도록 연결합니다.
Tip
이 실습은 지금까지 배운 Figma의 모든 기능을 종합적으로 활용하는 좋은 기회입니다. 막히는 부분이 있다면 이전 Day의 문서를 다시 참고하세요.
Note
Day 5의 모든 학습 내용을 완료했습니다. 다음 Day인 Day 6: UI/UX 실력 더 키우기에서는 Figma의 고급 기능과 디자인 시스템 구축에 대해 더 깊이 학습합니다.