[C/F TIL] 44~45일차 - 와이어프레임/ 프로토타입/ Figma/ Figma 클론

Code States
Front-end boost camp
Today
I
Learned

🍋 44일차! 디자인 툴..

🍋 와이어프레임(wireframe) & 프로토타입(prototype)

• 와이어 프레임 : 선으로 틀을 잡는다는 뜻, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듦
• 품질 수준에 따라 3가지 레벨로 나뉨
  
• 프로토타입 : 실제 제품과 거의 흡사하게 구현한 것, 본격적으로 개발에 들어가기 전 단계에 작성
• UI의 상호작용을 시뮬레이션 하는 것이 목적
  
• 차이점은?
  
• 프로토타입만 잘 작성해도 화면 구성과 사용자 흐름을 개선함으로써 좋은 UI, UX를 디자인할 수 있어 결과물 완성도를 높일 수 있다.

🍋 Figma

• 2016년 출시된 UI디자인&프로토타이핑 툴로 21년 해당 분야 1위
• 특징 :
  -- 실시간 협업 가능
  -- 다양한 환경 지원
  -- 자동 저장 및 버전 관리
  -- 다양한 무료 폰트 지원
  -- 오토 레이아웃 기능
  -- 프로토타이핑

🍋 Figma 컴포넌트 구현 - 페어 프로그래밍

• 일단 어드밴스드 도전과제 말고 bare minimum을 풀어보았는데... figma를 이렇게 사용해도 되는가? 싶을 정도로 정말 비슷하게 구동되게끔만 구현을 했다;; 페어분과 둘이 골똘히 고민해봐도 이거시 최선... 내일 실시간 세션 때 보다 나은 답변을 알려주겠지?
• 내가 구현한 방법 : 아래 블로그를 보고 뚝딱거리며 따라해봄(링크 참고 : https://weirdsector.tistory.com/41)
  -- 1) 도형 + 텍스트 등을 이용해서 원하는 모양을 만듦
  
  -- 2) 토글 버튼을 눌렀을 때 모양 또한 따로 만들어줌 : 색변환, 동그라미 위치 변경
  
  -- 3) 위에 만들어 준 두가지를 각각 컴포넌트로 묶어줌. 즉 1)과 2) 모양의 컴포넌트가 2개가 됨
  -- 4) 우측 메뉴에서 'combined as variants' 버튼을 눌러줌 -> 1), 2)의 컴포넌트를 하나로 묶어주는 큰 범위의 컴포넌트!
  -- 5) 이름을 알아보기 쉽게 바꿔줌 : 큰 컴포넌트(Conponent7) 안에 1) State=Off, 2)State=On 컴포넌트 2개가 있음
  
  -- 6) 좌측 메뉴에 Assets 가보면... 내가 만든 Component7이 존재하는데, 걔를 드래그로 끌어서 원하는 위치에 넣어줌
  
  -- 7) 클릭할 때 마다 토글 버튼이 바뀌게끔 즉, 클릭 시 마다 State=Off <-> State=On 이 왔다 갔다 할 수 있도록 우측 Prototype-interaction 에서 설정해줌
  

근데 이게... 목업 만들기 할 때 처럼 기능으로 구현된다 라기 보다는 정말 모양만 같은 기능을 하도록 구현해 놓은거라... 맞는가 확실치가 않다.

다만 피그마 툴을 사용하는 이유가 개발단에서가 아니라 디자이너-개발자간 협업을 위한 거라면 무엇이 되든 문제는 없을 것 같긴한데.. 여튼~ 야매 구현 완료!

🍋 45일차 페어프로그래밍 - Figma 클론

앞선 44일차 수업 내용에 더해, 원하는 웹페이지를 figma로 구현하는 클론 실습니다. 페어분과 함께 진행했고, 우리는 간단하고 쉬운 구글 메인화면을 클론했당.

증말 간단하지만.. 나름대로 넣을 건 다 넣어줌ㅋ

• 중반부 아이콘 마우스 커서 올릴 시 hover
• 검색창 클릭시 자동완성 창 open - 닫기 가능
• 각 상단바 아이콘 클릭 시 페이지 이동
• 마이크 버튼 클릭 시 음성인식 창으로 이동...

등

🍋 44일차 수업을 마치며...

뭐랄까... 재미가 있으면서 재미가 없고 재미가 없으면서 재미가 있는 느낌? 어릴적 인터넷 소설 가상캐스팅 만든다고 혼자 포토샵 눌러보던 때가 생각나서 흥미로웠다...

피그마를 왜 사용하는지, 어떤 식인지 주요 기능을 사용해보며 이해할 수 있었음!