피그마로 와이어프레임과 프로토타이핑을 진행하고 싶다면 아래 영상을 학습하면 된다.
- https://www.youtube.com/watch?v=tWPskJZQb5E&list=PLkbzizJk4Ae9L-n9yEquO9T927speoMWd&index=1
-
학습 예상 소요시간 (1-1부터 2-8까지)
- 영상 시간 150분, 실습까지 약 4시간
-
영상 실습에 필요한 리소스
-
정보 구조 분석 및 설계하기
-
(미션 1-1) 평소 자주 사용하는 어플리케이션을 선택하여 화면을 캡쳐하고 나열해보세요. 그리고 레이블링(하단 탭 구조)로 정보 구조를 분석하고 구조도를 그려보세요. (PPT, Google Presentation, 마인드맵 등 원하는 프로그램 사용)
-
(답을 여기에 작성)
-
(미션 1-2, 심화) 멀티플랫폼 서비스의 정보 구조 분석
-
선택한 어플리케이션이 웹과 모바일 앱 버전을 모두 제공한다고 가정해보세요. 두 플랫폼 간의 정보 구조 차이를 분석하고, 플랫폼별 특성을 고려한 통합 정보 구조를 설계해보세요. 사용자 경험을 일관성 있게 유지하면서도 각 플랫폼의 장점을 살리는 방법에 대해 고민해보세요.
-
(답을 여기에 작성)
-
와이어프레임 만들기
-
(미션 2-1) 분석한 어플리케이션의 주요 화면들에 대해 와이어프레임을 작성해보세요. 손 스케치나 디지털 툴 중 편한 방법을 선택하여 진행하세요.
-
(답을 여기에 작성)
-
(미션 2-2, 심화) 접근성을 고려한 와이어프레임 설계
-
시각 장애인 사용자를 위한 접근성 기능을 고려하여 와이어프레임을 수정해보세요. 음성 안내, 큰 글씨 모드, 고대비 모드 등의 기능을 어떻게 와이어프레임에 반영할 수 있을지 고민해보세요. 최소 3가지 이상의 접근성 기능을 추가하고, 이에 따른 UI 변화를 와이어프레임으로 표현해보세요.
-
(답을 여기에 작성)
-
프로토타이핑 진행하기
- (미션 3-1) 작성한 와이어프레임을 바탕으로 프로토타이핑을 진행해보세요. Sketch, Figma, Adobe XD 중 하나를 선택하거나, 처음 접하는 경우 마블앱이나 칸바를 활용하여 만들어보세요. 결과물은 mp4나 gif 형태로 저장하세요.
- (답을 여기에 작성)
- (미션 3-2, 심화) 다국어 지원 프로토타입 만들기
- 글로벌 서비스를 목표로 하는 앱이라고 가정하고, 다국어 지원 기능을 프로토타입에 추가해보세요. 영어, 한국어, 일본어 세 가지 언어로 전환 가능한 프로토타입을 만들어보세요. 언어 전환 시 레이아웃이 어떻게 변화해야 하는지, 특히 우측에서 좌측으로 읽는 언어(예: 아랍어)를 지원한다면 어떤 점을 고려해야 할지 생각해보세요.
- (답을 여기에 작성)
플러터로 UI 구현하기
- (미션 4-1) 프로토타이핑한 화면 중 주요 화면 3개를 선택하여 플러터로 구현해보세요. 디자인이 완벽히 일치하지 않아도 괜찮습니다. 페이지 구성과 연결에 초점을 맞추어 구현해보세요.
- (답을 여기에 작성)
- (미션 4-2, 심화) 다크 모드 및 테마 전환 구현
- 프로토타이핑한 화면을 플러터로 구현할 때, 다크 모드와 라이트 모드를 지원하도록 만들어보세요. 사용자가 앱 내에서 테마를 전환할 수 있는 기능을 추가하고, 테마 전환 시 모든 UI 요소가 적절히 변화하도록 구현하세요. 또한, 시스템 설정에 따라 자동으로 테마가 변경되는 기능도 구현해보세요.
- (답을 여기에 작성)
프로젝트 문서화 및 제출
- (미션 5-1) 지금까지 진행한 과정(정보 구조 분석, 와이어프레임, 프로토타이핑, 플러터 구현)을 하나의 문서로 정리해보세요. GitHub의 AIFFEL_QUEST 레포지토리 안에 Flutter/Quest04 디렉토리를 만들고, README.md 파일에 문서화 작업을 진행하세요.
- (답을 여기에 작성)
- (5-2, 심화) 사용자 테스트 및 피드백 반영
- 구현한 프로토타입을 최소 3명의 실제 사용자에게 테스트받고 피드백을 수집해보세요. 수집한 피드백을 바탕으로 UI/UX를 개선하고, 이 과정을 문서화하세요. 초기 디자인과 개선된 디자인을 비교하여 설명하고, 각 변경 사항에 대한 근거와 기대 효과를 서술하세요. 또한, 추가적인 개선이 필요한 부분과 향후 발전 방향에 대해서도 제안해보세요.
- (답을 여기에 작성)