Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 컴포넌트 구현

---

Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 컴포넌트 구현

 

📌 Chapter6. Figma

Figma 특징

1. 실시간 협업 기능 (한 화면에서 여러 명의 사람이 동시에 작업할 수 있음)
2. 다양한 환경 지원 (웹 브라우저 기반이기 때문에 프로그램 설치가 필요없고, 어떤 환경에서든 사용 가능)
3. 자동 저장 및 버전 관리 (히스토리 기능이 있어 버전 관리에 유리)
4. 다양한 무료 폰트 지원
5. 오토 레이아웃 기능 (오토 레이아웃 기능을 사용하면 요소들 사이의 간격과 정렬에 규칙을 부여할 수 있고, 이 요소들의 크기가 변하더라도 부여한 규칙에 맞게 간격과 정렬 유지 가능)
6. 프로토타이핑 (간단한 Lo-Fi 수준의 프로토타입부터 실제 화면과 거의 흡사한 Hi-Fi 수준의 프로토타입까지 제작 가능)

 

✏️ Figma를 활용해 Low Fidelity 프로토타입 만들기

→ 코드스테이츠에서 제공한 와이어프레임에 스크롤과 인터렉션 등의 기능을 넣어 UI 상호작용이 가능한 프로토타입 제작 실습

 

✏️ Figma를 활용해 High Fidelity 프로토타입 만들기

→ 컴포넌트와 인스턴스를 사용, 다양한 프로토타입 적용

→ 피그마로 이렇게 다양한 프로토타입이 다 적용되는게 너무 신기하긴 한데 굳이 이걸 실습을..? 이란 생각은 들었다..ㅎㅎ

(하지만 사실 열심히 했다...)

 

 

⭐️ 과제. Figma 컴포넌트 구현

Components

 

→ 요구사항에 맞춰 GNB, Modal, Toggle, Tab, Accordion, Drop Down, Auto Complete 구현을 완료했다.

→ 이번 과제는 페어와 함께 작업물을 만드는 과제였다. 페어와 함께 같은 페이지에서 각자 작업을 했었는데, 처음에는 프로토타입을 어떻게 만들어야 하는지 몰라서 헤맸었다. 다행히 Figma라는 툴 자체에는 익숙했기 때문에 금방 익혔던 것 같다. 그래도 여전히 신기한 기능들이 넘나 많은것...

→ 처음엔 별로 신경안쓰고 대충 했었는데, 만들다보니 뭔가 더 신경써서 하고 싶어져서 결국 페어 시간이 끝나고 신경을 좀 더 써서 결과물을 만들었다. 나름 뿌듯한 것 같기도 하고!  

 

---

🌙  오늘의 회고

 오늘 오후에는 페어와의 과제로 피그마를 다루며 불태웠다. 피그마로 프로토타입까지 구현하는게 지금 시점에 그다지 중요하다는 생각은 들지 않았지만, 막상 과제로 나오니 잘해보고 싶은 생각이 들어서 요구사항을 모두 충족시키기 위한 작업을 했다. 만들고 보니 보기에도 예쁘고 깔끔해 보이게 만들고 싶어서 조금 더 신경을 써서 작업을 했다. 피그마로 프로토타입까지 구현할 일이 없어 처음 해본 작업이었는데, 꽤 재미있고 신기한 기능이 많다는 생각이 들었다. 역시 툴은 잘 사용하면, 그만한 효율성을 있는건 분명한 것 같다.

 내일 또 다른 피그마 과제가 있는데 오늘은 그만 리액트 공부나 마저 해야겠다….ㅎㅎ