TIL: 2022-10-25

⚙️ 오늘 배운 주제

피그마, 와이어프레임, 프로토타입

 

🐹 오늘의 기분

예전부터 어떻게 쓰는지 궁금했었던 피그마를 배웠다. 오티 때 이번 유닛은 쉬어가는 유닛일 거라고 그러셔서 그 말을 곧이곧대로 믿었건만... 피그마를 아예 처음 써보는 상황에서 설명이 휘몰아치는 튜토리얼 영상을 보니까 완전 허겁지겁 따라갈 수밖에 없었다. 중간에 배속도 되어 있고 전부 순식간에 넘어가버려서 너무 혼란스러웠음. 지금은 처음보다 익숙해져서 괜찮지만 페어 시간 전까지만 해도 앞이 아주 깜깜했다. 페어분이랑 클론해보면서 손에 점점 익기 시작했음. 

오늘 두 번쨰 딥토크도 했는데 나는 또 모더레이터가 되었다..😂 이 정도면 숙명인 듯 ㅠ 뭔가 저번 딥토크 질문보다는 더 딥한 질문들이 있었다. 대부분 생각하시는 게 비슷해서 공감이 많이 됐었고, 그룹원들의 말씀을 들으며 시야를 넓힐 수 있었다. 하지만.. 다음에는 저도 그냥 그룹원 하게 해주세요..

 

🗝 키워드

피델리티, 와이어프레임, 프로토타입

 

🗣 스스로에게 설명

와이어프레임과 프로토타입

와이어프레임 (기획 단계)

wireframe: 선으로 틀을 잡는다.

제품 기획 단계에서 구조를 잡기 위한 목적임.

피델리티 fidelity: (사전적 의미) 충실도, 정확도

피델리티에 따라 로우, 미들, 하이 와이어프레임으로 나뉜다.

 

Lo-fi: 손으로 빠르게 그린 수준의 와이어프레임, 큰 그림 잡기에 좋음
Mid-fi: 딱 봤을 때 해당 페이지가 어떻게 작동할지 예상할 수 있음
Hi-fi: 완성본에 가깝게 작성한 것. 목업에 가까운 형태. 이렇게 만드는 경우는 거의 없음.

 

프로토타입 (개발 전 단계)

실제 제품과 거의 흡사하게 구현한 것.
본격적으로 개발에 들어가기 전 단계에 작성.
UI의 상호작용을 시뮬레이션하는 것이 목적임.

Lo-fi: 구체적인 내용 없음. 간단한 상호작용과 페이지 이동 정도만 테스트 가능. User flow 상에서 빠지거나 어색한 기능이 없는지 빠르게 검토 가능
Hi-fi: 최종 결과물과 유사한 수준으로 만든 프로토타입. 디자인 거의 확정. 사용성 테스트 가능. 개발 전에 문제를 발견하고 고칠 수 있어 비용 절감 효과가 있음.
Mid-fi: 사용성 테스트를 하기 위한 최소한의 기준

 

🔍 공부가 더 필요한 부분

피그마 컴포넌트, 인스턴스

auto layout 관련 공식문서 읽어보기