eunzi789 님의 블로그

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(모바일 컴포넌트 자료조사_ list/card)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 11:00 : 디자인 카타 - list/car 예시자료 찾기

11:00 ~ 13:00 : 개인과제 - 진행 순서 및 계획세우기/해야할 일 리스트만들기

14:00 ~ 17:00 : 개인과제 - 사용성 테스트 스크립트짜기/모집공고 만들기

17:00 ~ 18:00 : 피그마 - 작업 정리

19:00 ~ 20:30 : 개인과제 필수2 목록 체크 및 계획세우기 

20:30 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

특강이나 카타 시간을 통해 들었던 디자인 용어와 개념

블로그 링크 : https://eunzi789.tistory.com/55

TIL 작성

강의나 카타시간에 들었던 용어를 메모장에 한켠에 적어두고 수업이 끝난 후 찾아보거나, 설명을 간단하게 적어두었었는데 시간이 조금 괜찮은 듯해 정리를 하면서 다시한 번 읽어보게 되었다. 디자인과 관련된 용어들이니 한번쯤은 들을 수 있을 수도있고 그때 또 모르지 않기위해서 모아서 정리를 해보았다. 

FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일

1. UX 강의듣기

 이번주 내내 개인학습시간을 가졌고 본격적인 UX 공부를 시작하게되었다. UX 기획 및 리서치 강의였고 5주차까지 완강하고 중간중간에 껴있던 과제도 다 제출완료했다.!

2. UI 컴포넌트 조사

아침마다 진행하는 디자인 카타 시간..ㅎ bar 대한 자료 조사를 진행한 뒤 발표까지 완료하였다. 다른 컴포넌트 조사 발표도 들을 수 있었다. 

3. 새로운 팀 배정

새로운 팀원들과의 일주일을 보냈당

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

1. 어려운걸요

UI강의는 그래도 실습을 하면서 재미가 있었는데, UX 강의는 기법들이 많아 어렵기도하고 머릿속에 한번에 다 들어오지않아 헷갈렸고 듣고있다보면 루즈해지기도 했다..

2. 멘붕

bar컴포넌트는 참.. 다양한 이름을 가졌구나..? 조사를 하면 할 수록 bar를 지칭하는 명칭이 여러가지여서 정리하느라고 애를 먹었고 시간도 많이 들었다. 

3. 아직은 어색한

새로운 팀원들과 인사를 나누고 아침저녁으로 스몰톡을 하면서 조금 친해진듯하다(내생각)

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

1. UX 기획 및 리서치

사용자 중심의 설계와 프로젝트에 적용하는 방법론에 대해 여러가지를 많이 알게되었고, UX 디자인의 단계에 대해서도 체계적으로 알 수 있었던 시간이었다. 각 단계에서 필요한 기법을 활용하는 것이 중요할 것 같았다.   

2. UI 컴포넌트

bar 말고도 버튼과 토글버튼에 대한 종류와 기능도 알 수 있는 시간이었다. 그 기능에 해당되는 것과 벗어나는 것들을 잘 짚어주셔서 정리를 할 수 있었다. bar 컴포넌트가 제일 많은 혼동이 있었던 것 같은데, 튜터님께서 기기별로 부르는 명칭과 주로 사용하는 디바이스를 표형태로 정리해주신 것이 명확하게 차이점을 이해할 수 있어서 좋았다. UI 디자인에 중요한 주요 컴포넌트에 대한 지식이 업그레이드 되었다고나 할까.!

3. 개인과제 공유 시간

새로운 팀원들과 개인과제 피드백을 공유하는 시간을 가졌었는데, 내가 작업한 것만 보다가 다른 사람들의 작업물을 보니 어떤 부분이 모자란지 어떤 부분을 본받아야 할지가 느껴졌다. 특히 과제를 진행하기 위해 자료 조사를 꼼꼼히 진행한 것이 인상깊었고 실제로 과제를 진행할 때 자료들을 참고하면 많은 도움이 될 것 같았다.

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

1. 문제 해결 능력 기르기

사용자의 요구와 행동을 분석하고 결과에 어떻게 도출할 것인지에 대한 능력을 기르기 위해 강의 내용을 꼼꼼히 정리하고, 개인과제를 진행하면서 습득해보아야겠다. 과제를 하다보면 사용자 리서치 스킬도 올라갈 것 같다. 실용적이고 참신한 솔루션을 도출하는 과정을 연습한다고 생각해야겠다.  

2. 실무에서 써먹기

다양한 명칭을 알았고 그것이 어디서 어떤부분을 지칭하는지에 대해 알아보았으니 이제 실무에서 눈치껏 바로 캐치할 수 있을거라고 생각한다.! 까먹기 전에 정리를 해두고 종종 읽어보아야겠다.

3. 

시작이 반이라는 말이있다. 프로젝트를 진행할때 기획부분은 시간을 많이 잡아먹는다 생각하여 빨리 끝내고 다음 단계를 쳐내는데에 급급했었는데, 생각해보면 탄탄하지 않았던 기획은 빈틈이 있고 프로젝트를 진행할 때에 영향이 꼭 있었던 것 같다. 그런 경험들과 오버랩되면서,, 기초적인 부분들에 시간을 들이고 정리도 틈틈히하는 공을 들이는 것을 소홀히 하지 않아야 겠다.

일정표 ✨

09:00 ~ 10:00 : 튜터님과 디자인 카타 진행(UI컴포넌트 발표)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 11:00 : 디자인 카타 (UI 컴포넌트-bar) 코멘트 및 내용 정리

11:00 ~ 11:30 : 튜터님 2차 상담

11:30 ~ 13:00 : 개인학습(UX 기획 및 리서치) 4주차 강의 내용 정리

14:00 ~ 16:30 : 개인학습(UX 기획 및 리서치) 4주차 과제 제출

16:30 ~ 18:00 : 개인학습(UX 기획 및 리서치) 5주차 강의 듣기

19:00 ~ 20:00 : 개인학습(UX 기획 및 리서치) 5주차 강의 내용 정리

20:00 ~ 20:30 : 팀원들과 개인과제 피드백 공유 시간

20:30 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

1. 피그마

• 스타일 복사하는 법 : 마우스 우클릭 - Copy/Paste as - Copy Properties
• 스타일 복사 단축키 :  [ Ctrl ] + [ Alt ] + [ C ] / [ Ctrl ] + [ Alt ] + [ V ]
• 프레임 벗기기 : Ctrl + Shift  + G 

2. 튜터님과의 2차 상담

• 실무 및 포폴 관련 질의응답
• UI 화면 구성시 소수점 단위에 대한 질문

TIL 작성

1. 피그마

4주차 과제를 하면서 스타일을 하나하나 적용하려니 너무 귀찮았다. 워드나 한글문서처럼 스타일을 복사할 수 없을까 싶어 검색해보았는데 역시나 방법이 있었는데 내가 모르는 것이었다.

또 개인과제를 고치면서 왜 내 버튼은 글자가 넘치면 아래로 내려가는 것일까싶어 연구해보았더니. 텍스트 자체를 프레임을 씌운 뒤 또 프레임(버튼프레임)에 넣어서 그런 것이었다..! 그래서 찾게 된 프레임 벗기기 단축키.. 텍스트의 프레임을 단축키로 제거하니 긴 글자도 알아서 잘 펼쳐지고 괜찮았다. 알게 된 것은 또 기록해두는 것이 인지상정.

2. 튜터님과의 2차 상담

Q. UI 화면 구성시 소수점으로 떨어지는 frame을 어떻게 해야할까?

소수점 단위를 최대한 지양해야겠지만, 실제 개발을 들어갈 때 가로값을 따로 지정하지 않기 때문에 더 신경을 써야하는 부분은 fill모드로 값이 다 채워져 있는지를 확인 하는 것. 예를들어 마진값이 20px이고 컨텐츠들의 gap이 20px일때 화면에서는 남은 사이즈 안에서 나눠 들어가기 때문에 그 값이 소수점으로 떨어지더라도 어쩔 수 없는부분. 

Q. 포폴 분량을 어떻게 조정하는지?
발표할때의 포인트와 면접의 포인트가 다르며 장표의 구성도 다를 수 있음.

포폴엔 모두 다 담되 면접때는 중요 포인트만 짚어서 흐름으로 이야기하는 것이 좋음
tip) 질문 여지를 남겨두는 발표를 하는 것이 좋을 듯

Q. 실무에서 UX를 위한 데이터를 볼수있는지?
회사 규모에따라 다른데 큰 규모의 회사에선 데이터 사이언티스트 같이 데이터를 다루는 팀이 거의 있고 그 팀과 함께 협업해야함.  혼자서 모든 과정을 진행하는 것이 아니고 서포트하는 팀이 있으니 걱정하지 않아도 됨.
작은 회사의 규모일 경우 팀이 따로 있진 않겠지만 데이터를 볼수있도록 설정해 놓았을 수도 있음. 의지만 있다면 데이터를 활용하는 것이 불가능하진 않음.

피그마에서 레이어나 프레임 간에 커넥션을 만들게 되면 인터랙션(Interaction)을 설정할 수 있다. 인터랙션은 연결된 대상들이 프로토타입에서 어떤 식으로 전환되거나 상호작용할지를 결정한다. 인터랙션을 설정하면 preview에서 UI를 확인할 때 좀 더 생동감있게 페이지를 전환하거나 간단한 기능을 동작하게 만들 수 있으며 협업시 소통에 도움이 될 수 있다.

인터랙션 설정을 위해서는 아래의 사항들을 알아야한다.

1. 트리거(Trigger)

먼저 트리거를 설정해야 하는데, 프로토타입에서 커넥션이 시작되는 대상(레이어 혹은 프레임)에 어떤 행동을 했을 때 인터랙션을 시작할 것인지를 선택하는 것이다. 참고로 프레임과 프레임 간에 커넥션을 연결했을 때, 트리거는 기본적으로 On Click으로 설정된다.

• None (없음)
• On Click / On Tap (대상을 클릭하거나 손가락으로 탭했을 때)
• On Drag (마우스로 드래그하거나 손가락으로 스와이프했을 때)
• While Hovering (마우스로 대상 위에 호버하는 동안만)
• While Pressing (마우스로 클릭하고 있거나 손가락으로 누르고 있는 동안만)
• Key/Gamepad (키보드나 패드의 특정 키를 누르고 있을 때)
• Mouse Enter (마우스가 대상의 영역으로 진입/호버했을 때)
• Mouse Leave (마우스가 대상의 영역을 벗어났을 때)
• Mouse Down / Touch Press (마우스 누름이나 터치를 감지했을 때)
• Mouse Up / Touch Release (마우스를 누른 상태 or 화면을 터치한 상태에서, 손가락을 뗐을 때)
• After Delay (정해놓은 시간이 지난 후에)

2. 액션(Action)

다음은 액션으로, 트리거를 설정한 조건을 만족했을 때 어떤 일이 일어나야 할 지 설정하는 것이다. 액션은 프레임과 프레임 간에 커넥션 연결 시, 기본적으로 Navigate to로 설정된다. 또, 내가 커넥션을 준 대상이 프레임인지, 영상인지 등에 따라 특정 액션들이 보이거나 보이지 않는다.

• None (없음)
• Navigate to (하나의 화면에서 다른 화면으로 전환하기)
• Change to (특정 요소로 변하기)
• Open Overlay (화면/프레임 위에 특정 요소를 띄우기)
• Swap Overlay (띄운 요소를 다른 요소와 바꾸기)
• Close Overlay (띄운 요소를 닫기)
• Back (이전 화면으로 돌아가기)
• Scroll to (특정 부분으로 스크롤하기)
• Open Link (링크 열기)

(대상이 영상인 경우)

• Play Video (비디오 재생하기)
• Pause Video (비디오 일시정지하기)
• Toggle Play/Pause (트리거 작동 시마다 재생과 일시정지를 번갈아가면서 실행하기)
• Mute Video (영상 음소거하기)
• Unmute Video (영상 음소거 해제하기)
• Toggle Mute/Unmute (트리거 작동 시마다 음소거와 해제 번갈아가면서 실행하기)

3. 데스티네이션 (Destination)

데스티네이션은 설정한 액션의 대상을 말하며 인터랙션을 만들게 되면 연결한 대상이 데스티네이션으로 자동 설정된다. 예를 들어서 Frame 1으로부터 시작해서 Frame 2로 커넥션을 연결했다면, Frame 2가 데스티네이션이 되는 것이다. 데스티네이션은 프로토타입에서의 화면, 즉 프레임이 될 수도 있지만, 팝업 같은 걸 표현하기 위한 용도로 Overlay라는 액션을 주면, 프레임이 아닌 레이어들로도 지정할 수 있다. 

4. 애니메이션(Animation)

추가로 애니메이션을 설정할 수 있는데 Navigate to 액션을 기준으로 했을 때, 한 화면에서 다음 화면으로 넘어갈 때 어떤 식으로 전환될지를 설정한다. 애니메이션은 아래와 같은 종류가 있다. 그 외에도 어떤 방향으로 애니메이션이 작동할지(Direction), 얼마나 부드럽게 애니메이션이 작동할지(Ease)를 설정할 수도 있다.

• Instant (별도 애니메이션 없이 바로 전환)
• Dissolve (한 화면에서 다음 화면으로 부드럽게 블러되면서 전환)
• Smart Animate (이전 화면과 다음 화면에서 변한 요소들이 무엇인지 계산해서 자동으로 애니메이션 생성)
• Move In (다음 화면이 이전 화면 위로 움직이면서 들어옴)
• Move Out (다음 화면이 이전 화면 위로 움직이면서 빠져 나감)
• Push (다음 화면이 이전 화면을 밀어 들어오면서 전환됨)
• Slide In (Move In과 Dissolve가 섞인 형태로 전환됨)
• Slide Out (Move Out과 Dissolve가 섞인 형태로 전환됨)

이렇게 위의 내용들을 바탕으로 설정하면 인터랙션을 만들 수 있게 된다.

참고 링크 :  https://www.codeit.kr/tutorials/61/understanding_figma_interactions

마우스드래그로 슬라이드되는 캐러셀을 만드는 방법

1. 슬라이드할 이미지 세가지를 일정한 간격으로 배치한 뒤 frame selection으로 감싸준다. Item Container라는 이름으로 정해보았다.

2. frame을 한번더 감싸고 이름은 View로 정해주었다.보여져야하는 크기(아이폰13 mini 기준이라 가로 사이즈는 375px로 설정)만큼 맞춰준다. 폴더 구조는 View > Item Container > Image01, Image02, Image03 이렇게 된다.

3. 프로토타이핑을 위해 각각의 이미지가 view의 중심에 왔을 때 3가지 경우를 만들었다. 이미지 하단에 네비게이션 바도 함께 배치했다. 

4. 위의 세가지 view를 모두 드래그하여 컴포넌트에서 create component set로 묶어준 뒤, 프로퍼티에서 각각의 values값을 정해준다. 

5. 생성된 컴포넌트 안의 이미지 순서대로 프로토타입으로 이어준다. 드래그했을 때 다음 이미지로 이어지도록 설정해야하므로 on drag를 사용하였고, change to로 가져올 이미지를 연결해주면 완성.!

일정표 ✨

09:00 ~ 10:00 : 튜터님과 디자인 카타 진행(UI컴포넌트 조사)

10:00 ~ 10:30 : ch.3발제 zoom참석

10:30 ~ 11:00 : 새팀원들 인사 및 팀노션 작성

11:00 ~ 11:20 : 데일리 스크럼 진행 & 학습 계획 세우기

11:20 ~ 13:00 : 개인학습 - UX 기획 및 리서치 (1주차)

14:00 ~ 16:30 : 개인학습 - UX 기획 및 리서치 _ 1주차 과제 작성 후 제출

16:30 ~ 18:00 : 개인학습 - UX 기획 및 리서치 (2주차)

19:00 ~ 20:20 : 개인학습 - UX 기획 및 리서치 _ 2주차 과제

20:20 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

디자인 숙련 _ UI/UX란 무엇인지 심층적으로 알아보기

제품과 사용자 사이를 이어주는 것이 UI/UX라고 할 수 있다.

UI(User Interface) : 목적을 달성하기 위한 행동을 할때 무언가와 상호작용을 하는 것을 도와주는 수단

UX(User eXperience) : 사용자가 서비스를 이용하면서 느끼는 총체적 경험

용어)

HCI (Human Computer Interaction)

• 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야(대학원에서는 주로 UX/UI보다는 HCI라는 용어를 더 많이 사용)
• 연구의 주된 목적은 사람이 컴퓨터를 더 쉽게 사용하고, 더 잘 활용할 수 있도록 개선하는 것

 CX(Customer Experience)

• 브랜드를 처음 만나는 순간부터 제품을 사용하는 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상을 뜻함
• UX와 구분되는 특징은 느낌, 인상에 더 집중한다는 데에 있음
• CX에는 고객 서비스(CS)가 포함 됨

BX(Brand Experience)

• 고객이 브랜드와 상호작용할 때 갖는 전반적인 인식, 브랜드를 생각했을 때 떠오르는 감정 등을 의미
• 큰 범위에서 CX와 UX가 모두 BX에 포함 됨
• Brand Identity라고 부르는 것들 이름, 로고, 컬러, 슬로건 등이 포함
  (예시_ 나이키 스우시 로고, Just Do it 슬로건, 조던 등)

TIL 작성

본격적인 UX를 배우기 전에 UI/UX에 대한 차이점을 다시 한번 짚을 수 있었고 기업에서 명시한 직무들 UI디자이너/UX디자이너/프로덕트 디자이너 등 업무의 차이점을 정확히 이해 할 수 있었다.

또 회사에 따라 UX/UI 디자이너를 부르는 이름도 조금 씩 다르며 회사의 규모나 구성에 따라 맡게 되는 업무도 다양하다는 것을 알았다.  대기업일수록 비즈니스 규모가 커서 UX와 UI의 역할도 구분하고 팀도 다르게 뽑는다는 것이다. UI는 좀더 시각적인 설계와 심미성을 개선한다면, UX는 리서치와 사용성 테스트, 통계적 분석 및 결론 도출이 주된 역할이 된다. 이 두 분야를 합한 프로덕트 디자이너는 정성적 정량적 데이터를 활용할 줄 알아야하며 다양한 직군들이 모여 한 팀으로 협업하는 것 같았다. 이런 다양한 특징을 잘 파악하여 나에게 좀더 알맞은 직무와 회사로 지원하는 것이 중요할 것 같다. 

*참고자료 : CH 3. UXUI란?

FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일

1. UI 개선 팀프로젝트 진행

선정한 서비스를 토대로 리서치/자료분석/결론도출 및 UI개선 및 ppt제작까지 팀원들과 많은 회의를 통해 머리를 맞대어 결과물을 만들었으며 많은 의견과 아이디어를 주고받을 수 있었다

2. 튜터님의 피드백

프로젝트 진행 중 튜터님의 피드백을 토대로 수정하고 방향성도 조절하였다.

3. 발표회

5일동안 진행한 프로젝트를 발표하는 날이었고  다른 팀들의 발표를 들을 수 있었다.

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

1. 마치 한 몸이 된 것 같은 팀원들

팀프로젝트를 진행하다보니 하루종일 붙어있게 되어서 급속도로 친해진 것 같았다. 또  다들 지쳤겠지만 마지막까지 화이팅을 외치면서 더 힘을 내서 마무리 할 수 있었고 팀원들에게 고맙다. 

2. 왜라는 질문에 벙어리가 되어버리쥬,,

튜터님의 피드백들은 빠진부분과 아쉬운 부분을 콕콕 짚어주셔서 멘탈이 한번씩 나갈 때가 있었던 듯ㅎㅎ.. 

3. 긴장과 아쉬움

내가 발표가 아닌데도 발표 할 때까지도 계속 긴장되고 떨렸다. 다른팀들의 발표를 보니 조사를 안한 것도 아니었는데 누락이 된 부분들이 보일 때는 체크하지 못한점이 굉장히 아쉬웠다 

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

1. 효율적인 협업 방법

우리팀은 초반에는 많은 회의를 통해 서비스도 선정하고 리서치를 하면서 함께 진행했으며 후반에는 각자의 파트를 맡아 본인의 부분을 완료한 뒤 팀원들의 피드백을 통해 수정&개선하는 방법을 이용하였는데, 정해진 시간안에 효율적으로 일을 진행하는데에 좋은 방법이라는 생각을 했다. 각자의 파트를 수행하면서 더 집중도 있게 부분을 완성할 수 있었고 그 뒤에 각자의 부분을 피드백하며 하나로 합치는 과정이 빠르게 진행도 되고 더 좋은 결과물이 될 수 있어 협업을 할 때 유용한 방식이라고 생각했다.

2. 분석 결과 도출

튜터님은 3번의 순회를 오시면서 반복적으로 왜 그런 결론을 도출했는지와 리서치는 있지만 분석한 결과가 없다. 과정과정의 연결이 뚝뚝 끊어져있는 것같다는 피드백을 주셨고 그 부분을 해결하기위해 앞단계로 돌아가 다시한번 과정을 되짚으면서 단계에 대한 결론을 도출했다.이 과정을 통해서 각 단계마다 분석한 결과물이 중요하다는 것을 알게되었다. 단순히 자료조사만으로 그치는 것이 아닌 하나의 결과로 도출하여 개선을 위한 핵심 문제점과 니즈를 파악하는 것이 중요하단 것을 다시한번깨달았다.   

3. UI디자인 시스템 분석

UI 분석에서 스타일에 대한 분석이 추가가 되면 더 좋을 것같다는 피드백을 받았는데, 다른 팀들의 ppt엔 꼼꼼한 분석장표를 볼 수 있었고 이런 분석 과정을 통해서 동일한 규칙과 시스템이 중요하다는 것을 알게되었다.

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

1. 앞으로도 겪을 많은 협업에서도 함께해야할 부분은 약속시간을 정하고 각자의 부분은 또 잘 수행하여 팀 전체가 시간안에 완성도를 내는 좋은 방법들을 사용해보아야겠다.

2. 개선을 위해서는 어떤 기준을 세워 왜 진행되었는지에 대한 근거를 들어야하므로 앞으로도 이런 과정을 탄탄하게 진행 한뒤 타당한 근거와 기준을 기반으로 개선하도록 해야겠다.

3. 다른 팀들의 ui 분석 장표를 참고하기 위해 캡쳐해 두었는데 다음번엔 브랜드에 대한 디자인 시스템도 분석하여 UI개선시 도움이 되는 자료가 될 것 같다. 

일정표 ✨

09:00 ~ 09:30 : 계획서 작성 및 데일리 스크럼

09:30 ~ 11:00 : 팀 프로젝트 진행- UI 개선안 1차 마무리

11:00 ~ 13:00 : ppt 제작 아이디어&컨셉회의

14:00 ~ 15:20 : ppt에 넣을 자료 정리

15:20 ~ 16:10 : 장정은 튜터님과 과제 중간점검(2차)

16:10 ~ 17:00 : 피드백 받은 부분 개선 회의

17:00 ~ 18:00 : 기존화면 수정 / 컴포넌트수정/추가화면 제작

19:00 ~ 19:30 : 프로토타입 적용

19:30 ~ 20:30 : ppt 발표자료 각자 맡은 파트별 정리

20:30 ~ 21:00 : WIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

어떤 기준에 따라 문제점을 선정했는지 핵심가치를 선정할 것 

TIL 작성

팀과제 네번째날! 어제 주신 UI부분 피드백을 바탕으로 오전에 수정을 끝내고 2차 피드백을 받았다. 오늘은 전반적인 흐름을 보셨는데 자료조사는 많이 했지만 그 자료조사에 따른 분석결과가 없다고 콕 집어주셨다.

코레일이 현재 가지고 있는 사용성의 문제점과 사용자들의 불편함들을 많이 조사한 것은 맞지만, 그런 자료들을 활용하여 어떤 기준을 가지고 문제에 접근할 것인가에서 어떤 기준이 빠졌다는 말을 하셨다. 이 서비스의 주요 핵심기능은 무엇인가를 생각해보았을 때 코레일 어플의 주요 기능은 예매였다.

그렇다면 두번째로 어떤 기준을 두고 문제를 선정했느냐인데, 그 기준이 무엇이 되어야할지는 우리가 조금 더 깊이 고민했어야하는 부분이었다. 코레일의 핵심가치는 고객의 만족도를 충족하는 서비스를 제공하는 것이었다. 하지만 만족도를 충족하지 못하는 서비스여서 앱평가와 후기/블로그 후기 등이 좋지 않은 것이라 생각했다. 그러므로 우리는 고객의 만족도를 충족시키는 것에 초점을 두었고,  그런 기준에 따라 어떤 고객층을 주타겟층으로 할 것인가로 이어져야하는 순서였다. 

자료를 찾는 것은 쉽지만 그것을 바탕으로 문제를 도출할 때에 어떤 기준을 세우느냐에 따라 문제점도 다 다르게 도출되므로 기준을 잘 세우는 것이 중요하다는 것을 오늘 한번더 깨달았다. 기준을 잃지 않고 프로젝트를 처음부터 끝까지 끌고 나가는 것이 참 힘든 것 같았다. 이번을 계기로 문제점을 어떤 방향성을 두고 해결해 나가야하는지에 대해 좀 더 명확하게 알 수 있었다   

일정표 ✨

09:00 ~ 10:00 : 계획서 작성 및 데일리 스크럼

10:00 ~ 11:00 : 팀 프로젝트 진행( 사용자 문제 찾고 정의하기 _페르소나 정리)

11:00 ~ 13:00 : 

14:00 ~ 18:00 : 팀 프로젝트 진행!

• 와이어프레임 만들기
• UI키트만들기
• 개선안 디자인
•  

19:00 ~ 20:00 : UI 개선하기

20:00 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

문제점을 바탕으로 나온 개선점을 유의하며 그 목적을 가지고 UI개선에 접근해야한다는 것 

TIL 작성

오늘은 팀과제 세번째날! 조사한 자료들에서 도출한 문제점과 개선점을 토대로 와이어프레임을 짜보았다. 지금까지 과정에서 좋은 아이디어들을 코멘트로 붙여놓아서 금방 할 수 있을 거라 생각했는데 큰 오산이었다.

막상 기존 UI에서 어떤식으로 변경하는 것이 더 직관적이고 개선된 것인지 감이 안 왔다. 팀원들의 의견을 토대로 여기저기 수정해보았지만 여기저기 설명하는 텍스트만 더 늘어난 느낌이었다. 그때 튜터님께서 순회하러 오셨는데 장정은 튜터님께서 우리팀 과제를 보시고 바로 날카로운 피드백을 주셨다.

먼저, [간편구매]라는 기능에 대한 사용자들의 많은 블로그 리뷰를 보고 문제점을 바로 알 수 있었는데 간편구매지만 간편하지 않다는 문제점으로 메인화면에서 구매를 유도하는 제일 핵심 기능임에도 불구하고 어떻게 사용하는지와 불편한점, 아쉬운점들이 많았으며 아예 사용해보지 않은 사람도 있었다.

그래서 우리는 간편구매라는 버튼을 좀 더 직관적이게 [빠른예매]라는 문구로 바꾸었고, 제 기능을 할 수 있도록 간편구매등록 기능을 바깥으로 빼서 [즐겨찾기]처럼 제공하기로 기획했다. 즐겨찾기 버튼을 메인화면의 결제 섹션 윗부분에 필터처럼 넣었는데, 튜터님께서는 섹션안에 함께 제공하는 것이 예매 플로우에 좀 더 적합하다고 짚어주셨으며, 또 이 기능을 제공하는 목적을 다시 한번 생각해보는 것이 좋을 것 같다고 하셨다.

코레일 주사용자들이 예매를 할 때 즐겨찾기로 구간과 시간을 미리 등록하여 더 빠르고 간편하게 예매할 수 있도록 하는 것이 우리의 목표를 되새기고 피드백을 중심으로 즐겨찾기를 어떻게 선택하게 할 것인지 UI를 다시 설계해보았다. 목적지 위에 배치하여 즐겨찾기를 등록하여 직관성도 살리면서 편리함도 제공할 수 있게끔 수정하였다. 

두번째로는 분리된 간편구매기능(즐겨찾기로 제공하기로함)에서 정보를 등록해야하는 폼이었다. 우선 별칭은 구간을 등록한 이름과 같았는데, 사용자가 기차를 예매하는 플로우에서 제일 중요한 정보 1순위는 출발역과 도착역이라고 생각하였다. 그래서 역 선택을 제일 상단으로 배치하고 역을 어떻게 선택하느냐에 따라 열차종류와 경로가 바뀔 수 있도록 기획하였다. 다음은 push 알람 설정으로 기존에는 드롭다운을 클릭한 후 사용또는 미사용 총 2번 클릭해야하므로 번거로우면서도 직관적이지않았다. 그래서 on/off 개념의 스위치로 변경하여 클릭한번이면 끄고 켤수 있게 하였고 또, on이 되면 몇일전에 알람을 뜨게 할 것인지 드롭다운도 활성화되도록 기획하였다. 

UI개선을 하면서 기존 서비스 틀을 깨지 않으면서 어느정도까지 수정하는 것이 좋을지 고민도 많이 했지만

역시 왜! 고쳐야하는지 왜!불편한지를 다시 한번 상기시키면 이 부분은 그 목적엔 해당하지 않으니 그대로 가져가도 좋을 것 같다는 판단이 섰다. 이런식으로 목적과 목표에서 벗어나지 않도록 계속 머릿속에서 반복적으로 생각해야했다. 이런 부분들이 학습되면 다음번에도 더 빠르고 핵심적으로 문제에 대한 접근을 할 수 있을 것 같았다.  

일정표 ✨

09:00 ~ 10:00 : 튜터님과 디자인 카타(프로덕트 발표)

10:00 ~ 11:00 : 팀원들과 과제 진행 과정 공유 & 피드백

11:00 ~ 11:20 : 튜터님 방문(질문&피드백)

11:20 ~ 11:40 : 데일리 스크럼 진행 & 개인과제 진행상황 체크 및 todo list 작성

11:40 ~ 13:00 : 심화과제(품절화면/재입고알림/알림 확인 다이얼로그)

개인과제 마무리!

14:00 ~ 16:30 : 심화과제(비회원 구매하기/상세화면 캐러샐적용/장바구니 화면)

16:30 ~ 17:20 : 인터랙션 및 프로토타입 적용

17:20 ~ 17:50 : 마무리(UI키트 및 컴포넌트 정리) 및 제출

19:00 ~ 20:00 : 과제 해설 영상 시청&메모

20:00 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

1. 개인 과제를 진행하며 배운 것과 어려웠던 것, 해결한 방법

2. 해설영상을 보며 알게된 것

TIL 작성

오늘은 개인과제를 제출하는 날이었는데 팀원들과 오전에 진행 과정을 공유하면서 서로 체크를 해주는 시간을 가졌다. 혼자서 진행할 때는 보이지 않았던 부분들과 놓쳤었던 부분들도 다시 체크할 수 있는 좋은 시간이었다.

첫번째 문제는 라디오 버튼을 베리언츠로 on/off로 동작하게는 만들었지만 실제 상세화면에서 사용자가 눌렀다고 가정한다면 다른 라디오버튼은 off 상태로 변환되어야하는데 어떻게 해야할지 감이 안 왔다. 거기서 청림님이 자신이 만든 방법을 공유해주어서 감을 잡을 수 있었다. 라디오 버튼이 있는 리스트(갯수와 가격)들 자체를 하나로 컴포넌트로 만들었고, 4가지의 상황을 프로토타이핑으로 연결하였다. 그러니 preview에서 매끄럽게 사용할 수 있게 되어서 문제 해결!  

두번째 문제는 상세화면 캐러샐이었는데 처음엔 세가지 이미지를 묶은 컨테이너를 넣어 가로 스크롤로 접근했었다. 튜터님께선 그 컨테이너 자체를 세가지로 만들어 프로토타이핑을 연결해야한다고 설명해주셨다. 각각의 이미지가 보여지는 세가지의 버전으로 컴포넌트 세트로 만들어 그 컴포넌트에서 프로토타이핑을 해주었다. 그렇게 하니 클릭했을 때 다음 이미지로 착 붙어서 스와이퍼되는 것 처럼 보였다 굿.!

과제 제출을 한 뒤 해설영상을 보면서 바텀 시트 만들기도 해보아야겠다고 생각했다. 그리고 UI키트를 잘 정리해놓은 것을 보니 부끄러웠다. 해설영상에 비하면 나는 정리한 것도 아니었다. 생각해보니 지금은 혼자 작업해서 어디에 어떤 컴포넌트가 있는지 다 알고있지만, 다른 사람들이 보면 찾지 못할 것 같았다. 그 부분이 제일 아차 싶은 부분이었다. 앞으로 귀찮더라도 UI키트를 보기쉽게 잘 정리하는 습관을 들여야겠다.