와이어프레임 vs 프로토타입
와이어프레임
: 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조 잡기 위한 목적
와이어프레임 표현할 때 품질 수준을 ‘피델리티(fidelity)로 표현하며 3가지 레벨로 나뉨.
- Low Fidelity Wireframe : 손으로 빠르게 그린 수준
- Middle Fidelity Wireframe : 어느정도 구체화된 뒤 다듬음, 어떻게 작동할지 예상 가능
- High Fidelity Wireframe : 완성본에 가깝게 작성한 것 / 목업에 가까움 (Hi-Fi 수준까지 만드는 경우는 거의 없음)
프로토타입
: 실제 제품과 거의 흡사하게 구현한 것으로 본격적으로 개발에 들어가기 전 단계에 작성, UI의 상호작용 시뮬레이션 하는 것이 목적
프로토타입 역시 3단계로 나뉨
- Low Fidelity Prototype : 간단한 상호작용, 페이지 이동 정도 테스트해볼 수 있는 수준(user flow 상에서 빠지거나 어색한 기능, 페이지가 없는지 검토)
- Middle Fidelity Prototype : 사용성 테스트 위해서 적어도 Mid-Fi 수준의 프로토타입 작성해주는 것이 좋음
- High Fidelity Prototype : 최종 결과물과 거의 유사한 수준 (개발 비용 들어가기 이전 UI/UX 관련 문제 발견 & 수정 가능)
Figma
: UI 디자인 & 프로토타이밍 툴
실시간 협업 가능, 다양한 환경 지원, 자동 저장 및 버전 관리, 다양한 무료 폰트 지원, 오토 레이아웃 기능, 프로토타이핑 등의 특징 있음
과제 : Figma 사용해서 인프런 메인 페이지 클론
배운점
-
페어 혹은 미래에는 팀원일 수 있는 사람에게 피그마 링크 공유 후 권한 허용(can edit)해 함께 작업하는 방법
-
피그마 내에서 wireframe, iconify,unsplash 등의 플러그인 사용
-
컴포넌트
컴포넌트는 계속해서 반복해서 쓰일 것들에 지정해주면 되고, 지정 후
인스턴스를 만들어서 사용 가능.
컴포넌트만 변경되면 컴포넌트로 인해 생성된 인스턴스들도 함께 변화함. -
Variant interactions 를 통해 click이나 while hover와 같은 액션을 지정하고, 그에 따라 나타날 결과들을 지정할 수 있다. (이벤트 핸들러 느낌?)
느낀점
-
코드를 쓰는 작업은 아니었지만, 코드를 쓰기 전 미리 원하는 페이지의 모습이나 어플리케이션의 모습을 만들어보고, 테스트 할 수 있다는 점이 유용한 프로그램이라는 생각이 들었다.
-
디자인 툴을 원래 다뤄봤던 분들이 확실히 진도가 빠르게 나가는 것처럼 보였다... 그래도 뒤쳐지지 않게 열심히... 노력해보았다.
-
움직이는 배너같은 것들을 만들 때 배너가 작동되는 때에 맞춰 페이지들을 하나하나 만들어주어야 해서 꽤 번거롭단 생각이 들기도 했다.
