와이어프레임(wireframe)
제품 기획 단게에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다
- Low Fidelity Wireframe (Lo-Fi Wireframe)
- 손으로 빠르게 그린 수준의 와이어프레임
- 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉬움
- 아이디어를 구체화시키며 큰 그림을 잡을 때 좋음
- Middle Fidelity Wireframe (Mid-Fi Wireframe)
- Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어준 와이어프레임
- 해당 페이지가 어떻게 작동하게 될지 예상할 수 있음
- High Fidelity Wireframe (Hi-Fi Wireframe)
- 완성본에 가깝게 작성한 와이어프레임
- 목업에 가까운 형태
- 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 와이어프레임을 작성하는 목적과는 맞지 않아 Hi-Fi 수준까지 만드는 경우는 적음
프로토타입(prototype)
실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능
본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적
- Low Fidelity Prototype (Lo-Fi Prototype)
- 구체적인 내용이 작성되어 있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준
- User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토 가능
- High Fidelity Prototype (Hi-Fi Prototype)
- 최종 결과물과 거의 유사한 수준
- 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트 가능
- 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있음
- Middle Fidelity Prototype (Mid-Fi Prototype)
- Hi-Fi 처럼 완성도가 높진 않지만, Lo-Fi 보다 최종 결과물에 가까운 프로토타입
- 사용성 테스트를 하기 위해선 적어도 Mid-Fi 수준까진 작성해주는 것이 좋음
와이어프레임 | 프로토타입 | |
작성 시기 | 기획 단계 | 개발 전 단계 |
작성 목적 | 화면 구조 설계 | UI 상호작용 시뮬레이션 |
특징 | 정적 | 동적 |
피델리티 | Low ~ Middle (High는 거의 작성X) | Middle ~ High (Low는 테스트에 적합하지 않음) |
Figma
UI 디자인&프로토타이밍 툴
Figma 특징
- 실시간 협업 가능
- 한 화면에서 여러 명의 사람이 동시에 작업 가능
- 다양한 환경 지원
- 웹 브라우저 기반 프로그램이기 때문에 브라우저만 사용할 수 있다면 어떤 환경에서든 사용 가능
- 자동 저장 및 버전 관리
- 자동 저장 기능 제공
- 누가 언제 무엇을 변경했는지 확인할 수 있는 히스토리 기능도 있어 버전 관리에 유리
- 다양한 무료 폰트 지원
- 구글 폰트를 사용할 수 있어 폰트를 별도로 설치할 필요가 없음
- 폰트가 없어서 화면이 깨지는 현상도 발생하지 않음
- 구글 폰트 이외에도 사용자 PC에 저장된 로컬 폰트를 불러와서 사용 가능
- 오토 레이아웃 기능
- 오토 레이아웃 기능을 사용하면 요소들 사이의 간격과 정렬에 규칙을 부여할 수 있고,
이 요소들의 크기가 변하더라도 부여한 규칙에 맞게 간격과 정렬을 유지할 수 있음
- 오토 레이아웃 기능을 사용하면 요소들 사이의 간격과 정렬에 규칙을 부여할 수 있고,
- 프로토타이핑
- 피그마에서 제공하는 프로토타입 기능을 활용하면 간단한 Lo-Fi 수준의 프로토타입부터 실제 화면과 거의 흡사한 Hi-Fi 수준의 프로토타입까지 제작 가능
Figma 단축키
기본 단축키
- 복사하기 : Command + C
- 붙여넣기 : Command + V
- 잘라내기 : Command + X
- 복제하기 : Command + D 혹은 Option 누른 상태로 드래그
- 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭
- 그룹으로 묶기 : Command + G
- 프레임으로 묶기 : Command + Option + G
- 그룹, 프레임 해제하기 : Command + Shift + G
- 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기
오토 레이아웃
- 오토 레이아웃 추가하기
- 오토 레이아웃 적용할 요소 선택 → Shift + A
- 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택
- 오토 레이아웃 제거하기 : Shift + Option + A
컴포넌트
- 단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Command + Option + K 혹은 상단 Create component 버튼 클릭
- 컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택
- 상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택
- 컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가
- 컴포넌트의 인스턴스 생성
- 컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
- 화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다 놓기
모든 단축키 확인 : control + shift + ?
'CodeStates > CS' 카테고리의 다른 글
Section3 / Unit6 : [네트워크] 심화 (0) | 2023.06.29 |
---|---|
Section3 / Unit5 : [사용자 친화 웹] 웹 표준 & 접근성 (0) | 2023.06.26 |
Section3 / Unit2 : UI/UX (0) | 2023.06.13 |
Section2 기술 면접 연습 (0) | 2023.06.08 |
Section2 / Unit8 : Postman (0) | 2023.05.26 |