SEB _ FE _ 45
Section 3. Unit 2. [사용자 친화 웹] UI/UX part.3 - Figma
복지관에서 일할 때 미리 캔버스, 망고보드로 홍보지 만들고 했던게 기억나서, 재밌는 시간이었다.
피그마를 이용해서 작업하면서 신기했던 점은 페이지, 컴포넌트 간의 관계를 맺게 하는 것이었다.
피그마로 레이아웃을 잘 짠다고, 프론트엔드 개발을 잘하는 건 아니겠지만,
뭐든 잘하면 좋지 않겠나 싶다!
와이어프레임
- 제품 기획 단계에서 페이지의 구성과 구조를 잡기 위한 목적으로 사용된다.
피델리티(Fidelity)
- 와이어프레임을 표현할 때의 품질 수준을 의미한다.
- Low Fidelity Wireframe(Lo-Fi Wireframe) : 손으로 빠르게 그린 수준을 의미한다. 수정이 쉬워 새로운 의견 반영이 용이하다.
- Middle Fidelity Wireframe(Mid-Fi Wireframe) : 아이디어가 어느정도 구체화되고, 확정된 수준이다. 해당 페이지의 작동도 어느정도 예상이 가능하다.
- High Fidelity Wireframe(Hi-Fi Wireframe) : 완성본에 가까운 수준이다. 와이어프레임이라기보다는 목업에 가깝고, 작성하는데 시간이 많이든다. 수정도 어려워 와이어 프레임을 만드는 목적에 부합하지 않는다.
프로토타입(prototype)
- 본격적으로 제품을 개발하기 전 단계이며, UI의 상호작용을 시뮬레이션 하는 것이 목적이다.
- Low Fidelity prototype(Lo-Fi prototype) : 간단한 상호 작용과 페이지 이동 정도만 테스트하는 수준이다.
- Middle Fidelity prototype(Mid-Fi prototype) : Lo-Fi prototype 보다는 완성본에 가까운 수준이다. 사용성 테스트를 하기 위해 적어도 Mid-Fi prototype 수준은 작성해주는 것이 좋다.
- High Fidelity prototype(Hi-Fi prototype) : 최종 결과물과 거의 유사한 수준이다. 디자인을 거의 확정한다. 개발 비용이 투입되기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용절감 효과를 볼 수 있다.
피그마(Figma) 특징
- 실시간 협업 기능 : 한 화면에서 여러 사람이 동시 작업할 수 있다.
- 다양한 환경 지원 : 웹 브라우저 기반 프로그램이기 때문에 별도의 프로그램 설치 과정 없으며, 여러 OS와 기기 환경을 지원한다.
- 자동 저장 및 버전관리 : 누가 언제 무엇을 변경했는지 확인할 수 있는 히스토리 기능 지원하여 버전관리가 용이하다.
- 다양한 무료 폰트 지원 : 구글 폰트를 활용할 수 있어 별도 폰트 설치 없이도 이용이 가능하다.
- 오토 레이아웃 기능 : 요소들 간 간격과 정렬에 대한 규칙을 부여할 수 있어, 요소들의 크기변화에 대해 사용자가 정한 규칙이 적용되어, 간격과 정렬을 유지할 수 있다.
- 프로토타이핑 : 프로토 타입 기능을 활용하여 Lo-Fi 수준의 프로토 타입부터 Hi-Fi 수준의 프로토타입까지 제작할 수 있다.
과제. 피그마로 컴포넌트 구현하기
1. GNB(Globla Navigation Bar) 구현하기
- 마우스가 호버링되면 색깔이 변하고, 클릭하면 해당 페이지로 이동한다.
2. 모달 구현하기
- 모달 기능은 보여주고 싶은 창을 오버레이해서 보여주는 것으로, 닫기 클릭 또는 범위 밖을 클릭하면, 초기화면으로 이동한다.
3. 토글 구현하기
- on/off 스위치 버튼에 자주 사용된다.
4. 탭 구현하기
- 인덱스가 있는 정보를 제공할 때 유용하겠다.
5. 아코디언 구현하기
- 트리 구조의 메뉴판이나, 어떤 주제에 대한 설명 시 많이 사용한다.
- 미끄러지는 것처럼 구현해보고 싶었는데, 쉽지 않았다.
아직 구현하지 못한 Advanced 과제!
구현하게 되면 추가하도록 하겠다!
6. 드롭다운 구현하기
7. 자동완성 구현하기
정리 및 회고
오늘 수업은 재밌으면서도 은근 머리가 아팠다.
일단, 여러 기능들이 있으나 익숙하지 못한 부분이 힘들었다.
그리고 평소 웹페이지에서 자주 사용하던 UI 기능들인데 막상 구현해보려고 하니 뭐부터 해야하는지 막막했다.
그럼에도 앞서 언급한 것처럼 회사 다닐때 느낌이 나서 재밌었다.
단... ㅎㅎ 피그마 같은 프로그램은 정말.. 시간을 개미지옥처럼 잡아먹는다.
뭐 별로 한 것도 없는 것 같은데.. 시간이 벌써 6시다.
내일은 Figma 클론 과제가 있는데, 기대가 된다!
내일도 즐겁게 공부해보자!
천채즌 노력하는 사람을 이길 수 없고,
노력하는 사람은 즐기는 사람을 이길 수 없다.
'SEB_FE_45(코드스테이츠) > section 3.' 카테고리의 다른 글
| Unit 3] [React] Custom Component(CDD, 개발도구) (0) | 2023.06.16 |
|---|---|
| Unit 2] [사용자 친화 웹] UI/UX part.3 - Figma 클론 과제 (0) | 2023.06.15 |
| Unit 2] [사용자 친화 웹] UI/UX part.2 (1) | 2023.06.13 |
| Unit 1] [자료구조/알고리즘] 재귀 part.2 (0) | 2023.06.13 |
| Unit 2] [사용자 친화 웹] UI/UX part.1 (0) | 2023.06.13 |