Week 6
2024.11.27(Wed)
- 플로우차트 설계
2024.11.29(Fri)
- 와이어프레임 제작
2024.12.02(Mon)
-Userbility Test 설계
16일차(2024.11.27)
프로젝트 학습 내용
플로우차트
서비스를 사용하기 위해 수행하는 일련의 단계와 결정을 한 눈에 파악할 수 있도록 도와주기 위해 시각적으로 표현한 흐름도
- 개선하고자 하는 앱 화면의 흐름을 염두하여 단계별로 정해진 다이어그램 기호에 맞춰 표현
- 진행순서는 왼쪽에서 오른쪽으로 위에서 아래로 화살표를 이용하여 표현
- 개선전(As-is)과 개선후(To-be) 기호 컬러를 달리 표현하여, 어떤 문제를 어떻게 해결하였는지, 명확하게 비교하여 보여줄 수 있음
플로우차트 표준 기호
플로우차트 제작 순서
- 상단부에 사용자여정지도에 정리했던 사용자의 행동흐름을 기입하고, 하단부에 플로우를 정리한다.
- 개선전 앱을 기준으로 As-is 플로우차트를 만들다.
- As-is 플로우차트를 복사하여 To-be 플로우차트로 수정한다.
- As-is와 To-be에서 변화된 부분은 다른컬러로 표현하고, 왜 이렇게 개선하였는지 인사이트를 정리한다.
프로젝트 목표 설정
- 두번째 다이이몬드의 시작! 문제해결에 앞서, 무엇을(어떤 문제)를 어떻게 해결할 것인지 목표 설정하기
- 구체적으로 UI의 어떤 기능/ 어떤 사용성을 개선할 것인지 목표를 정한다.
- 구체적일 수록 향후 진행을 매끄럽게 할수 있으므로, 시간을 할애하여 고심하여 정리한다.
- 개선해야하는 UI페이지의 양을 팀원당 10페이지정도 고려하여, 3가지~5가지정도 목표를 설정한다.
각 Task 실습
실습과정 및 결과
와이어프레임(로우 피델리티) 정리
회고
와이어프레임 만드는 작업 너무 어렵다! 확실히 프롭테크 앱이다보니 많은 정보를 담고 있어서 로우 피델리티로 화면 구성을 하더라도 화면의 양이 많아 정리를 어떻게 해야할지 망설여졌다. 그래도 나름 정리를 잘한거 같다!
17일차(2024.11.29)
프로젝트 학습 내용
와이어프레임
선(Wire)으로 틀(Frame)을 잡는다는 뜻으로, UI의 콘텐츠, 기능, UI요소, 레이아웃을 대략적으로 요약하여 보여주는 화면설계도
- 와이어프레임을 통해 페이지별 레이아웃과 화면간의 흐름을 파악할 수 있음
- 내용을 표시할 색상, 타이포그라피, 이미지 등의 디자인요소들을 생략하고, 흑백의 윤곽선으로 표현하여 박스나 선을 주로 사용함
- 그 외의 내용은 최대한 추상화
와이어프레임 제작 방법
- 기존의 앱 화면을 To-be플로우차트 기준으로 캡처하여, 아카이빙 한다. 이때 태스크 수행에 연속성을 부여하고 행동에 제한을 주는 요소들을 최소화한다.
- 앱화면을 토대로 To-be 로우피델리티 와이어프레임을 제작한다. 이때 사용자가 태스크를 수행하는 각 단계마다 행동 유도성을 고려하여 화면설계 작업을 진행한다. 감이 안잡힌다면 As-is 와이어프레임을 먼저 만들어본다.
- 로우피델리티 와이어프레임을 토대로, 하이피델리티 와이어프레임을 만들며, 프로토타입을 준비한다.
각 Task 실습
실습과정 및 결과
회고
18일차(2024.12.02)
프로젝트 학습 내용
사용성테스트(Userbility Test)
사용자에게 특정 과업을 수행하도록 과제(Task)를 부여한 뒤,그 일을 진행하는 과정(행동)을 관찰하는 방법
- 서비스 기획 초기의 사용성 테스트를 통해, 유저의 니즈와 사용성을 미리 확인하고 개선할 수 있다.
- 의도한 서비스 시나리오대로 유저가 행동하는지 아닌지 알 수 있음
- 필수적인 컨트롤 요소를 인지/이해/예측/실행 하는지 알 수 있음
사용자관찰조사와 사용성테스트의 차이
- 사용성테스트는 앞서 진행한 사용자관찰조사와 방법이 유사하지만 그 목표가 다르다.
- 사용자관찰조사는 타겟유저의 니즈, 타겟유저의 페인포인트 등에 목표가 맞춰져 있다면, 사용성테스트는 어느정도 제품이 완성되었을때, 사용성 개선을 목표로 진행한다.
각 Task 실습
실습과정 및 결과
회고
스토리보드를 제작하기 전, 다양한 고민이 많았다. 직접 그림을 그릴지, 아니면 다른 팀들처럼 오픈소스를 활용할지 결정하는 데 시간이 걸렸다. 오픈소스를 사용하는 것이 더 간편해 보이긴 했지만, 적합한 소스를 찾는 데 오히려 더 많은 시간이 소요될 것 같았다. 그래서 직접 그림을 그리는 쪽으로 방향을 정했고, 그 역할을 내가 자진해서 맡았다. 비록 높은 퀄리티는 아니더라도, 직접 그리면 원하는 컷을 정확히 만들어낼 수 있고, 소스를 찾는 수고도 덜 수 있을 것이라 생각했다.
주어진 시간은 약 4시간. 그 안에 8컷을 제작해야 했는데, 시간 내에 가능할까 하는 걱정이 앞섰다. 결과적으로 7컷 정도를 완성했는데, 처음 예상했던 것보다 더 빠르게 진행할 수 있었다. 그림을 그릴 때는 원래도 집중력이 높은 편이지만, 스토리를 짜고 각 컷에 맞는 요소를 배치하며 그림을 그려야 한다는 점에서 4시간 내내 거의 그림만 그려야 했어서 신체적으로도 정신적으로도 부담이 있었다. 그러나 팀원의 도움 덕분에 일이 훨씬 수월했다. 한 팀원이 스토리라인과 대략적인 배치를 먼저 구성해준 덕분에, 나는 완전하게 그림 그리는 데만 집중할 수 있었고, 그 과정은 마치 손에 신이 내린 듯 빠르고 자연스럽게 그림을 그려나갔다.
완성 후, 팀원들이 "정말 고생했다"며 칭찬해줘서 감사했고, 다른 팀들 사이에서도 손그림으로 제작한 팀이 우리밖에 없어서인지 감탄을 받았다. 그 순간 뿌듯함이 밀려왔고, 직접 선택한 방식으로 작업을 해낸 것이 큰 보람으로 다가왔다. 이번 경험은 팀워크의 중요성과 더불어, 때로는 더 단순해 보이는 방법이 가장 효과적일 수 있다는 것을 느끼게 해준 소중한 과정이었다. 뭐 물론 나중엔 AI를 써야겠다고 생각했지만 말이다. AI가 더 퀄리티가 높아보였다^^;;
본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.
#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴
