유데미 UIUX

다음 공휴일까지 D-72라니🥲_유데미x스나이퍼팩토리 UI/UX 인턴형 프로그램 6기

1i1ac 2024. 10. 14. 23:29

 

 

[10.14 DAY 6]

2주 차 첫날 힘차게 시작....~!

커피를 좀 늦게 마셨더니 새벽에 잠을 설쳤다..

그래서 아침은 조금 몽롱하게 시작☕

 

 

[DAY 6]

강사님께서 오늘은 월요일이라 쉬운 예제를 가져오셨다고 한다🫶

덕분에 가뿐한 월요일이 되었다...🥺

오늘은 플러그인에 대해 배웠다.

 

플러그인(Plugin)

피그마 내에는 다양한 플러그인들이 있는데, 

이 플러그인을 활용하면 디자인을 좀 더 효율적으로 할 수 있다

ex. 아이콘을 커뮤니티에서 가져올 수도 있지만, 플러그인에서 좀 더 쉽게 가져올 수도 있다!

ex. 이미지나 더미 텍스트 또한 빠르게 가져올 수 있다. 

*더미 텍스트 : 의미는 없지만 화면 구성을 위해 채워야 하는 텍스트들.

 

 

comment 옆에 actions 아이콘 클릭!

 

플러그인은 피그마 하단 창에서 Actions 아이콘을 클릭하면 검색/설치할 수 있다.

 

 

 

 

 

 

 

오늘은 자주 사용하기 좋은 플러그인 4종류를 예제를 제작하면서 직접 사용해 봤다!

Feather Icons 플러그인을 통해 아이콘을 빠르게 대지에 불러올 수 있다.
해당 플러그인은 컴포넌트 형태가 아닌 그룹 형태이기에 유용하다.
Unsplash 저작권 걱정 없는 무료 이미지 사이트의 플러그인
사진을 다운받지 않고도, 플러그인 내에서 빠르게 사진을 가져올 수 있다.  
Lorem Ipsum 더미 텍스트를 만들 수 있는 플러그인
텍스트칸을 생성한 후 몇 글자/줄..이나 쓸지 설정하면 바로 더미 텍스트가 생성된다.
Flow Chart 플로우 차트 기호를 간편하게 사용할 수 있는 플러그인
빠르게 플로우 차트를 그릴 때 유용하다.

 

이중 플로우차트를 제외한 3개의 플러그인을 활용했다🙌

 

 

플러그인 검색창

 

검색하면 이렇게 플러그인이 뜬다..!

아이콘을 누르면 바로바로 대지에 아이콘이 옮겨진다.

이 플러그인은 컴포넌트 형태가 아닌 그룹 형태로 들어오기 때문에 굉장히 유용하다.

 

 

 

[Unsplash]

저작권 없는 이미지 사이트로 유명한 'Unsplash'도 피그마 플러그인에 있다.

 

unsplash 플러그인

 

 

UI 만들 때 예시로 사용하기 좋은 이미지가 많이 있다.

도형을 만든 후, 플러그인에서 이미지를 누르면 이미지가 바로 들어간다!

웹사이트만 주로 이용했었는데, 피그마에 unsplash 플러그인이 있는 걸 오늘 처음 알았다😮😮

 

 

[Lorem Ipsum]

더미 텍스트 플러그인

텍스트칸을 만든 후, 플러그인에서 더미 텍스트를 만들 수 있다.

몇 글자, 문장, 줄을 쓸지(Characters, Sentences, Paragraphs..) 등의 옵션을 선택 후 생성하면 끝!

정말 빠르고 간단해서 편했다 

 

설정 후 생성하기를 누르면 텍스트가 생성된다

 

 

 

[Flow Chart]

플로우 차트를 제작할 때 활용할 수 있는 플러그인이다.

플로우 차트에는 표준 기호가 존재하는데, 이 기호를 자동으로 만들어주는 기능이다.

ex. 시작과 끝은 타원형으로 표시한다

ex. 판단을 내릴 때는 다이아몬드로 표시한다. 

 

 

플로우 차트 플러그인

 

 

 

아직 플로우 차트를 활용할 수 있는 데까지 진도가 나가지 않아서, 이 플러그인은 나중에 활용해 보기로!

 

 

 


 

 

오늘의 핵심예제는 그동안 배웠던 게 총집합되어 있는 페이지!

수월하게 알파페이지와 서브페이지를 제작했다.

컴포넌트를 제작하고, 오토레이아웃을 활용해 페이지를 만들었다.

 

 

컴포넌트 제작

 

예제8 실습 완료

 

 

이미지는 언스플래쉬 플러그인을 활용했다.

그리고 만들면서 더미 텍스트 플러그인도 사용해 봤다.

필요한 텍스트를 더미로 간단하게 채울 수 있어서 너무 좋았다👍

다음 실습 때에도 유용하게 활용할 수 있을 것 같다!

 

 

[Checklist]
디자이너란 설계자이다.
레이어, 이름, 등 하나하나 모든 구성 요소를 잘 신경 쓰자.
섹션을 깔끔하게 유지하자.
컴포넌트, 프레임명을 잘 정리하자.

 

 

 

 

 


 

 

[팀 작업 일지]

오후는 항상 팀 작업시간이다!

지난 주말 동안 설문조사 폼을 열어두었고, 오늘 점심시간까지 설문을 받았다.

최종적으로 모수는 104명이 되었다. 

 

최종 104명!

 

오늘 진행해야 할 과정은 *카드소팅과 멘탈모델 정의다.


 

 

카드소팅과 어피니티 다이어그램의 차이는 무엇인가?


어피니티 다이어그램(Affinity Diagram) 카드 소팅 (Card Sorting)
카와키타 지로가 개발한 기법(KJ법, 친화도 분석 기법)
공급자의 팀원들이 정리를 하는 것 
카드소팅은 팀원이 아닌, 사용자가 하는 것
사용자가 직접 사용자 입장에서 카드를 정리하는 것

Ex. 사용자가 생각하는 브랜드의 현 위치가 어떤지

카드를 분류하고 제목을 붙인 결과를 통해
우리는 사용자의 멘탈 모델을 정리할 수 있다. 

 

단기 프로젝트이기에, 사용자에게 직접 카드 소팅을 진행할 수 없어서

팀원이 직접 사용자의 입장으로 카드를 분류하는 방식으로 과제가 진행되었다.

 

카드 소팅 정리 순서 

1. 그룹의 제목들
2. 주요 문제점 인지
3. 사용자 멘탈 모델 정의

이를 통해 앞으로 목표를 설정함에 있어 대표적 인사이트를 발굴하도록 한다. 

 

 


우리 팀은 이전 진행했던 내용에서 카드소팅을 한 과정이 있어서 이를 생략했다. 

대신 설문조사 내용을 수집 후, 여기에서 유의미한 페인포인트나 인사이트를 수집했다. 

 

 

페인포인트/인사이트 도출

 

실제 유저와 우리가 생각한 페인포인트가 맞을까? 유저가 정말 이 기능을 원할까?

등의 니즈와 페인포인트를 설문조사를 통해 확인하는 것을 목표로 했지만, 

아쉽게도 하루 만에 제작한 설문조사이기에 딥한 내용을 얻을 수는 없었다.

 

개인적으로 참 아쉬운 점이다. 

교육을 함께 듣는 수강생 수가 꽤 되기에, 설문조사 제작에 좀 더 공을 들였다면 

더 유효한 내용들을 뽑아낼 수 있었을지도 모르기에...

 

그래서 가설 검증보다는, 기존 리서치와 경쟁사 분석에서 얻은 내용과 더불어

설문조사에서 얻은 내용들을 합쳐 페인포인트/인사이트를 도출해 냈다. 

 

 


 

이후 해당하는 페인포인트를 토대로 두 가지의 *페르소나(퍼소나)를 대략적으로 정의했다. 

 

[퍼소나]

퍼소나는 제품이나 서비스를 사용하는 고객군을 대표하기 위해 가상으로 만든 인물이다.

보통 3명을 만드는데, 양 극단의 사람을 따로 만들고 가장 보편적인 사람을 가운데에 하나 둔다.

또는 메인 타깃/서브 타깃으로 각각 정의하기도 한다. 

퍼소나 제작은 선택해서 제작하면 된다.

 

퍼소나는 마치 하나의 실제적인 사람인 척하기 위해서,

해당하는 퍼소나의 사진/키워드/이름/행동/니즈/목적.. 등 세부적인 요소를 설정한다. 

 

 

 

페르소나를 왜 두세 가지 만들까?

 

 

페르소나는 제품이나 서비스를 사용하는 고객군을 대표하기 위해 가상으로 만든 인물이다.

하나의 퍼소나로는 그 서비스 이용자를 대표할 수 없다. 

또한 뭉뚱그린 평균 캐릭터로도 이용자를 대표할 수 없다. 

 

따라서 평균이 아닌, 구체적이고 실제적인 개인의 퍼소나를 제작해

수요자들이 어떤 동기를 가지고 행동하는지를 유추해 내는 것이다. 

 

 


 

[고객여정지도(유저저니맵)]

퍼소나를 만든 뒤, 고객 여정지도를 제작한다.

고객여정지도는 퍼소나가 이 서비스를 사용하면서 겪게 되는 모든 접점에 대해 시각화하는 것이다.

퍼소나가 언제 만족감을 느꼈고, 실패(페인포인트 체크)를 했는지를 체크할 수 있다.

저니맵을 통해 페인포인트의 개선 방향/기회 등을 찾을 수 있다. 

 

이용 목적을 태스크로 정리하고, 과정을 겪는 퍼소나의 감정선, 여기에서 얻은 인사이트/기회 등을 맵으로 정리한다.

 

 


 

 

 

우리 팀은 페인포인트 기반으로 각자 퍼소나를 작성해 보는 시간을 가진 뒤,

2개의 페르소나와 그 페르소나의 키워드, 성향 등을 대략적으로 설정 완료했다. 

그 후 간단하게 솔루션/개선 방향을 작성했다. 

 

 

 

 

 

 

[오늘의 후기]

사용할 수 있는 시간의 한계가 있다는 게 참 아쉽다. 

초단기로 빠르게 진행되는 만큼 정신을 잘 잡고 있어야 한다.

 

설문을 만드는 데에 시간을 좀 더 투자할 수 있었다면.. 

좀 더 좋은 내용을 뽑아낼 수 있었을 거라는 아쉬움이 있다.

모수도 크고, 또 성실한 답변을 기대할 수 있는 설문자들이기 때문이다.

 

또한 강사님께서도 설문 조사에 참여를 해주셨는데,

개인적으로는 설문 조사를 수강자 대상으로 돌리기 이전에

강사님께서 먼저 테스트를 해주고, 설문지에 대한 피드백을 주신 다음 

실제 설문조사를 돌리는 방향으로 진행했으면 조금 더 퀄리티 있는 설문지를 만들 수 있을 것 같았다.

 

또는 1주 차 내에 빠르게 주제 선정과 리서치를 진행하며,

주제가 확고히 드러난 팀은 설문조사를 좀 더 제작하는 시간에 공을 들여

좀 더 딥한 내용을 뽑을 수 있는 쪽으로 커리큘럼이 진행되었어도 좋았을 것 같았다.

 

다들 5분 이내로 끝나는 설문지 위주라.. 아마 빛나는 인사이트가 엄청 나오지는 않았을 것 같다.

아쉽지만 그래도 설문조사를 토대로 내용을 더 정리할 수 있었어서 좋았다. 

 

이제 내일은 대략적인 내용을 정리하고, 구체화시키는 것을 목표로..

유저 저니맵까지 빠르게 가보자고🏃

 

 

 

 

본 후기는 유데미 x 스나이퍼팩토리 UI/UX 인턴형 프로그램 6기 (B-log) 리뷰로 작성 되었습니다. #UI/UX인턴형프로그램 #UI/UX인턴형프로그램6기 #유데미 #Udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #UI/UX디자인 #UI/UX디자이너 #디자이너교육 #디자이너인턴