[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기 - 프로젝트코스 2주차 수행 후기 및 회고

이번주 월요일부터는 IA와 UI기획에 들어갔다

UI기획엔 와이어프레임 그리고 유저플로우가 있다 

모바일 IA에 대한 팀장님이 충분히 인지하고 오는게 좋을거같다며 주말에  좋은 블로그 내용들을 준비해주셨다.

 

 

1. 상단 인터페이스 - 빠르고 직관적인 접근 
모바일에서 검색 알림 프로필처럼 자주 이용하는 기능을 배치하는곳이다 , 즉시 접근성

2. 하단 인터페이스 - 주요기능에 대한 빠른 이동
주로 고정 내비게이션이 위치한다, 이동의 편리함과 안정적인 내비게이션 경험을 제공하는 것이 목표

3. 홈 인터페이스 - 핵심 정보

모바일 서비스의 첫화면이기에 즉각적이고 개인화된 정보 제공이면 좋다 

스팩스페이스에서 제공해준 기준이 정해진 IA

서비스 IA와 플로우 차트의 공통점
- 서비스의 전체 구조를 파악하기 위해 활용
- 프로젝트 전체 규모를 이해시키고 개발자와 디자이너와 협업하기 위해 활용

또한,  
IA는 메뉴를 분류 및 그룹화하여 Depth 구조로 설계한 것이고 
플로우 차트는 화면, 기능 단위로 사용자의 동선을 설계한 것이다

💡 서비스 IA의 장점과 단점

장점: 전체 서비스의 구조뿐만 아니라 각 개발 일정이나 중요도, 진행 정도를 한 번에 파악 가능 
단점: 구조가 많이 복잡해지거나 플로우가 다양하게 연결되는 경우 설명을 중복되거나 제한적으로 할 수밖에 없다 

IA는 개발자가 이해하기 쉽도록 뎁스(Depth)를 나누어 정보구조도를 작성한다 (나에게 중요)

 

 

그러면 이번엔 와이어 프레임이란?

디자인이 들어가기 전 단계에서 선 (wire)을 이용한 윤곽선(frame)을 잡는 것을 Wire-frame 이라고 한다.
스토리보드 → 와이어프레임, 목업 → 프로토타입으로 진행된다고 한다.

[출처] [IT] 정보구조 설계(IA),와이어프레임(Wire-frame) 작성법/그리는법|작성자 숨잇 soomIT

그렇게 우리는  IA를 작성하였다가 맞지만, 그전에 우리에게 아직까지 정확한 컨셉과 우리가 밀고나갈 주 포인트를 정하지 못해(없어서가 아닌 너무 많아서,,)
어피니티다이어그램이 등장했다. 이걸 진짜 할 줄이야 이번 프젝하면서 뽕 뽑을건 다 뽑고있다. 

각자 생각하는 것과 리서치하면서 알게된 부분 및 필요할 거 같은 기능들을 일단 포스트잇처럼 막 쓰고 관련된 것들을 묶었다.
뭔가 브레인스토밍 같았다 그렇게 해서 as is - to be로 우리는 3가지 포인트를 잡았다 

 

1. 어플 사용 중 공부에 대한 집중력이 쉽게 저하된다.(기존 약점) -> 동기부여 요소 와 5문제로 간단히 문제풀기
2. 다른앱들은 경쟁시스템 구도이다 -> 상호 교류를 통한 성장 커뮤니티
3. 포인트 획득과 소모와 캐릭터 이용으로 동기부여 및 자극

이렇게 잡았다 멘토링으로 인해 정말 많이~ 바뀌지만 거의 이 틀로 가게된다(미래의 작성자의 수정글)

이 과정은 IA와 함께 유저플로우도 진행하며 계속해서 바뀌게 되어 진행과정이 조금 늦어진다 생각할 수도 있지만, 팀원분의 화려한 디자인 능력으로 로고와 브랜딩 그리고 캐릭터도 맛깔나게 뽑혀 진행속도에 문제가 없었다

지..지린다

소개한다 Top + ping 위로 향하다와 지식을 담다 의 중의적인 내용 "토핑"이다 

 

이번주는 머리 쓸게 많았다. 개발처럼 어떻게 흘러갈지 구상하는 단계라 많이 비슷한 내용이라 1주차보다 오히려 이해와 실행 하기에는 1주차보단 쉬웠다. 위에 말은 안했지만 팀원들간 각자 페이지를 나뉘어 유저플로우를 진행했는데 첨에 갈피를 못 잡다 팀장님과 팀원이 도와주어 갈피 잡고 부랴부랴 만들어서 문제점 및 필요한것들도 많이 캐치했었다!

원래 이거보다 더 길고 컸는데 계속되는 수정거리와 내 파트가 새로 들어가는 시스템이라 멘토님이랑도 계속해서 자르고 붙혀서 수정이 많이되었다..! 뭐 이대로 와이어프레임짜고 잘 나오면 좋겠다~

화욜과 멘토링 미팅있던 금욜 (살다살다 오마케세도 가보네 ..?)