[유데미X스나이퍼팩토리] UI/UX 포트폴리오 과정 1WEEK

2024.07.01 1일차 - OT&팀 프로젝트 계획

 

1일차의 내용은 OT와 UX/UI이란 무엇이고 어떤 취업 경로가 있으며, 어떤 주제로 팀 프로젝트를 진행할 것인가였다.

 

 

UX/UI

 

 UX/UI는 모바일, 브라우저 외에도 워치, 패드, 키오스크 등 모든 디바이스의 화면을 디자인 하는 것이다. UX/UI의 차이는 다음과 같다.

UX(User eXperience)
- 문제를 하결하기 위해 다양한 사회현상과 고객의 니즈를 분석하는 툴
- 서비스 편의성과 사용성이 중요

UI(User Interface)
- UX 분석 바탕으로 만든 기획안을 실제로 화면을 설계하여 가시적으로 구현해내는 작업을 의미

 

 UX/UI의 차이로 가장 유명한 예시는 이 케찹인 것 같은데, 강사님도 이 사진을 예시로 보여주셨다.

 

 둘의 차이는 기능성과 심미성의 차이이다. 이 두 지식의 균형이 잘 맞아야 좋은 디자인이라고 할 수 있는 것이다.

 

 

인하우스/에이전시

 

 UX/UI의 일반적인 진로에는 인하우스와 에이전시 두 가지가 있다.

  에이전시 입사 후 인하우스로 이직하는 경우가 많지만, 에이전시가 성향에 맞는 경우도 있으며 이 경우에는 프리랜서로 활동하거 재택근무 하는 경우도 많다고 한다.

⭐️ 비전공인데, 그래픽에 자신이 없어요. ⭐️
  에이전시보다는 인하우스에 도전해, 디자인 포퍼먼스보다는 UX에 집중해 하나의 문제해결을 어떻게 풀어갔는지 맥락있는 포트폴리오 제작 필요
(나는 특히 여기에 집중)

 

 

2주동안의 목표

수업전체 목표 : 팀별 1개의 앱을 선정 분석하여, 1인당 1개의 문제해결 개선안 제안

UX : 사용자리서치방법론(5why, 장단점비교분석, 사용자인터뷰, UT), IA 등
UI : 컬러, 타이포그라피, 인터페이스, 디자인시스템 구현
피그마(툴) -> 피그마젬, 오토레이어 등등

1. 3개의 앱 장단점 비교
2. 하나의 앱의 하나의 기능 선택
3. 사용자 리서치새로운 개선안 제안

 

💡5조_도와조_2주간의 목표

      여러가지 의견들이 나왔으나 모두의 동의 아래 "영화예매 어플"을 선택하였다.

      > CGV, 롯데시네마, 메가박스

 

 영화 어플은 조원 모두가 자주 사용하고 있는 어플들이고, 앱의 특성상 용도가 명확하기 때문에 영화 어플들의 사용자 경험과 디자인을 비교하여 개선하려고 한다.

 

 

 

 

2024.07.02 2일차 - Figma & 사용자 관찰 조사

Figma

 오늘 처음으로 피그마를 사용해봤는데 하루 만에 기본적인 기능을 익힐 수 있었다. 오히려 포토샵이나 일러스트레이터보다 사용법이 직관적이고 단순하여 금방 익혀 제작할 수 있었다.

 

 기본적인 사용법을 배우기 위해 실제 앱의 UI를 그대로 따라 만들었고, 강사님이 중간중간 기능 적용 방법을 알려주시는 방향으로 실습을 진행하였다.

 

 

폰트 다운받기

 

[구글폰트 | Google Fonts]

https://fonts.google.com/

Browse Fonts - Google Fonts

 수업에 앞서 제일 먼저 한 것은 구글에서 제공해주는 폰트를 다운 받는 것이었다.  가장 기본적인 Noto Sans체와 Noto Serif체의 영어와 한글 폰트를 다운받았다. 

이렇게 4가지를 다운

 

 

실습

 

1. 원하는 프레임 선택 

   먼저 왼쪽 위에 있는 frame 아이콘을 클릭하여 디스플레이 프레임을 화면에 띄워준다.
   - Android small 혹은 Android large 사용

 

2. 오른쪽 Design을 사용하여 변경
   - Frame에서 x, y를 이용하여 위치 조정 
   - Frame에서 r값 지정하여 모서리 라운드
   - Fill에서 색 변경 + 그라데이션 

   - stroke에서 테두리 만들기

 

3. 참고할 레퍼런스 불러와서 예제 만들기

    프레임 옆에 사진을 붙여넣어 참고하면서 따라한다.

   

피그마의 기능을 배우기 위해 최대한 일러스트레이터의 사용 없이 만들어 보았다 - ⭐️⭐️⭐️

 

💡단축키 및 추가 기능
      k 누르고 줄인 후  v
      command g = 그룹화
      command sift g = 그룹화 풀기
      모양에 맞게 겹치게 하기 : 대상체를 use a mask → 대상체 복제 → 요소 넣기 
      아이콘 색 채우기 : 아이콘 더블 클릭 → 기존 색상 - → fill 눌러 색 지정
      union 개체 합체   
      라이브러리에서 컴포넌트 or 아이콘 사용

 

 

사용자 관찰 조사

 

 프로젝트 주제와 관련하여 "영화예매 앱"에 대한 사용자 관찰 조사를 진행하였다. 상황에 따른 Task를 정리하고, CGV, 롯데시네마, 메가박스 앱을 사용하여 영화 예매를 진행한 후 간단한 보고서를 스프레드시트로 정리했다.

 

 처음에는 일반적으로 영화를 예매하는 경우에 대해서 상황 설정한 후

영화가 보고싶어서 예매하려고 할 때

1. 현재 상영 중인 영화를 찾아본다.
2. 영화 정보, 평점등을 찾아본다.
3. 오늘 볼 영화를 고르고 원하는 영화관을 선택한다.
4. 시간과 좌석을 선택한다.
5. 할인 및 부가서비스를 확인한다.
6. 원하는 방식으로 결제를 완료한다.
7. 영화관에서 예매티켓을 확인한다.

순서로 정리지만, 강사님께서 우리에게 특수한 상황을 설정면 재미있는 인사이트가 나올 것 같다는 것과 영화를 볼 때 하는 행동들에 관하여 새로운 의견을 제시해주시는 등 우리가 생각하지 못한 부분에 대한 피드백을 해주셨다.

 

 그래서 우리 조는 먼저 갑작스럽게 영화를 보려고 하는 상황으로 상황 설정을 변경하였다.

번개로 영화를 보려고 할 때 (+팝콘, 포토티켓)

1. 근처 영화관을 찾아본다.
2. 영화와 시간을 고른 후 인원과 좌석을 선택한다. 
3. 할인 및 부가서비스를 확인한다.
4. 원하는 방식으로 결제를 완료한다.
5. 팝콘이나 음료를 사려고 한다. 
6. 영화관에서 예매티켓을 확인한다.
7. 관람 후 포토티켓을 뽑는다.

 상황 설정과 테스크를 변경하였지만 비교 분석과 개선 사항이 어떻게 나올지, 강사님의 피드백을 어떤 식으로 참고해야 할지 조금 더 생각해야 할 필요가 있어 보인다.

 

 

 

 

2024.07.03 3일차 - 스타일 라이브러리 & 사용자 관찰 조사

스타일 라이브러리

 

 UI를 디자인할 때 같은 색상, 폰트, 글자 크기, 그림자 등을 설정하기 편하게 하는 도구이다.

 

 

더블 다이아몬드

 

 

사용자 관찰 조사 작성

 

 과업 진행, 어려워한 부분, 타사 비교, 사용자 인터뷰 4가지로 관찰 조사 내용을 채워나갔다.

 

 

과업 진행

1. 근처 영화관을 찾아본다.
2. 영화와 시간을 고른 후 인원과 좌석을 선택한다. 
3. 할인 및 부가서비스를 확인한다.
4. 원하는 방식으로 결제를 완료한다.
5. 팝콘이나 음료를 사려고 한다. 
6. 영화관에서 예매티켓을 확인한다.
7. 관람 후 포토티켓을 뽑는다.

 지난 시간에 작성한 과업 진행 과정을 순서로 관찰해 보고서를 작성하였다.

 

 4명이라서 3가지 앱에 대해, 한 앱당 2명씩 나눠서 사용해서 각 2명의 의견을 모았다.

 (CGV는 팀원 A,B가/롯데시네마는 팀원 C, D/메가박스는 팀원 A, C가 진행)

 

 

어려워한 부분

	CGV	롯데시네마	메가박스
근처 영화관을 찾아본다.	근처 영화관을 찾을 수 없음		영화관 검색이 안되어 원하는 영화관을 찾기 어려움 지역이 많은 경우 원하는 영화관을 찾으려면 스크롤을 많이 해야 함
영화와 시간을 고른 후 인원과 좌석을 선택한다.	관람평 수치화x 불필요하게 중복되는 과정  줌 고정x 좌석 위치 파악 어려움  따로 떨어진 자리를 선택못함	화면에 광고가 많고 정리되어있지 않아 사용하기 불편함 홈의 정보 찾기 어려움 수치화된 관람평 찾기 어려움	줌아웃이 안되서 전체적인 좌석의 의 위치를 파악하기 어려움
할인 및 부가서비스를 확인한다.	해당 할인을 알 수 없음 통신사 할인이 누락 미리 구매에서 단일 상품을 구매x	해당 할인을 알 수 없음 통신사 할인이 누락
원하는 방식으로 결제를 완료한다.	결제 버튼 너무 아래에 있어 불편
팝콘이나 음료를 사려고 한다.	지금 주문, 미리 구매 중 어떤 버튼을 눌러야 할지 헷갈림	결제 후 바로 픽업을 원하는 경우에는 두 단계를 거쳐야해서 번거로움
영화관에서 예매티켓을 확인한다.	예매한 티켓이 앱 상에서 눈에 잘 띄지x 예매 후 좌석을 쉽게 바꿀 수 없음	전화번호 혹은 예매번호로만 티켓을 출력	티켓을 환불받기를 찾기 어려움
관람 후 포토티켓을 뽑는다.		결제까지 가는 과정이(선택하는 것이 많다)복잡함	포토티켓을 미리 앱에서 결제못함

 

 

사용자 인터뷰

 

CGV

1. 평론가들의 의견이 없다. 수치화된 평점이 없어 정보를 신뢰하기 어렵다.
2. 지역별로 영화관이 구분되어있으나 영화관이 많은 경우 많이 스크롤해서 원하는 지점을 찾아야 한다. 영화관을 검색하는 기능이 있었으면 좋겠다.
3. 좌석표를 보는 곳에 인원 선택 옵션도 있기 때문에 인원 선택과 좌석 선택을 굳이 안나누는 게 덜 번거롭겠다는 생각이 들었다.
4. 불필요한 단계(인원선택)가 있어 과정이 복잡하다. 전체좌석 이미지를 줌아웃한 상태로 화면이 고정되지 않아 한눈에 보기 힘들고, 좌상단 미니맵은 너무 어둡고 작아 파악이 어려워 좌석 위치를 직관으로 알기 어렵게 되어있다.
5. 좌석을 따로따로 한 자리씩 선택할 수 없다.
6. 메인화면에서 예매티켓을 찾기가 어렵다.
7. 통신사 할인 빼고는 할인 중 사용해본 적이 없어, 통신사 할인이 누락되어 있다는 점과 나에게 해당하는 할인을 찾기 어렵다는 점이 개선되었으면 좋겠다.
8. 결제하기 버튼이 너무 바닥에 있어 잘 안 보인다.
9. 촉박하게 자리를 예매했기 때문에 예매 이후에 더 좋은 좌석이 취소되어 해당 좌석으로 변경하고 싶을 때, 따로 결제 후 환불해야 한다. 좌석 변경 기능이 있다면 좋을 것 같다.

롯데시네마

1. 홈에서 일관적이지 않은 디자인으로 정보를 찾기 어렵다.
2. 옵션 라벨이 너무 많다.
3. 관람평을 객관적으로 나타내는 지표가 관람평탭에서 안 보인다. 객관적으로 평점을 볼 수 없어 파악하기 어렵다.
4. 가까운 영화관을 알 수 있고 몇km 거리에 위치하고 있는 지까지 알 수 있어 쉽게 영화관을 선택할 수 있었다.
5. 한 좌석씩 선택할 수 있어 원하는 좌석 선택이 자유롭다는 점이 좋았다.
6. 할인, 포인트가 한 화면안에 나타나 있어 찾기 쉬워 원하는 서비스를 찾는 것이 쉬웠다.
7. 구매 후 제조 요청을 할 수 있다는 점이 좋았다.
8. '흔들면 티켓이' 버튼, 티켓 버튼이 상담에 노출되어 있어 티켓을 찾는데 쉬웠다.
9. 영화 관람 전/후 포토티켓을 뽑을 시간이 없을 경우, 다른 영화관에서 뽑을 수도 있는데 그 가능성을 고려하지 않고 구매시 뽑을 영화관을 선택해야 한다는 점이 불편했다.

메가박스

1. 홈화면에 원하는 정보를 찾기가 쉽게 깔끔한 레이아웃으로 정리되어 있어 정보를 보는데 불편함이 없었다.
2. 타 극장과 비교하여 영화 정보도 깔끔하고 별점을 직관적으로 파악하기 쉬웠다.
3. 줌 자체가 되지 않고 미니 맵도 유지되는 것이 아니라서 좌석의 위치와 스크린과의 거리감을 파악하는데 불편했다.
4. 통신사 할인이 결제 단계 할인 목록에 있어 좋았다.
5. 할인수단을 즐겨찾기 할 수 있어 결제 시간을 단축할 수 있다는 점에서 좋았다.
6. 팝콘, 음료까지 미리 결제를 하고 싶지만 해당 옵션이 없다.(바로 구매만 가능)
7. 티켓이 바로 확인이 불가능하고 두번의 단계를 걸쳐서 티켓 확인이 가능해서 바로 티켓이 떴으면 좋겠다는 생각이 들었다.
8. 티켓을 홈화면에서 바로 볼 수 없고 한단계를 거쳐서 티켓을 볼 수 있어 급한 경우 찾기 어렵다. 환불하는 버튼을 찾기 어렵다.(티켓보는 곳에서 바로 환불이 안된다.)
9. 포토티켓 출력 금액을 미리 알기 어렵고 결제 과정이 없어서 더 빠를 수 있지만 혼잡한 영화관에서는 더 번거로울 수 있다.

 

Figjam 사용하여 인사이트 도출

 

사용자 관찰 조사를 기반으로 하여 인사이트를 도출했다.

CGV, 롯데시네마, 메가박스에 대한 어려운 부분을 나열한 뒤 영화 탐색, 영화 예매, 부가서비스 세 가지로 나눠서 묶었다. 

그 결과 평점 및 정보 파악, 영화관 및 좌석 파악, 옵션 라벨링 등에 대해 불편하다고 느낀다는 것을 알 수 있었다.

영화 정보, 영화 예매 과정의 직관적인 UI가 필요하고 영화관 찾기부터 팝콘구매까지를
손쉽게 해줄 수 있는 예매 서비스를 제공해야한다.

 

 영화예매 앱에 대한 최종 인사이트를 한 문장으로 요약했으며, 이에 대한 프로젝트 정의를 5가지로 나타냈다.

 

 

 

 

2024.07.04 4일차 - 컴포넌트 & Persona 퍼소나

컴포넌트

 

컴포넌트란?

 화면을 구성하는 모든 요소를 의미하며, 같은 속성의 요소를 사용하려고 할 때 만들어둔 요소를 컴포넌트로 저장하여 편리하게 사용할 수 있도록한다. 그룹화와 비슷하다고 느낄 수 있지만 단순히 요소들의 집합인 그룹화와 달리 컴포넌트는 각 구송 요소의 속성을 유지하며 원본을 수정할 경우 복제본도 함께 수정된다.

 

 

컴포넌트 제작

 

1. 만들어 놓은 요소를 컴포넌트로 만든다.

    요소를 선택한 뒤 마름모 4개로 이루어진 아이콘을 선택하면 컴포넌트가 만들어진다. 

2. 만들어진 컴포넌트의 복제본을 만들어준다.

     opion + 마우스 드래그를 하거나 Assets에서 등록된 컴포넌트를 가져와 복제한다. 복제본의 텍스트는 변경할 수 있다. 

채워진 마름모 4개 - 원본, 빈 마름모 - 복제본

 

 

퍼소나

 

 영화예매 앱에 대하여 불편한 점을 이야기해야 하기 때문에 우리는 앱에 익숙하면서도 잘 사용하지 않는 사람을 설정하는 것이 좋을 것 같다고 판단했다. 그래서 평소 OTT를 즐겨보는 20대 후반의 인물이 앱을 통해 영화 티켓과 팝콘, 포토티켓을 구매하는 상황을 가정하여 퍼소나를 제작하였다. 

 

 

 

 

2024.07.05 5일차 - 사용자 여정 지도 & 플로우 차트 & 오토 레이아웃

사용자 여정 지도

 

 퍼소나를 바탕으로 제작하는 것으로, 발견에서 구매(및 그 이후)까지의 프로세스를 시각화한 것.

 

 고객의 불만 사항이나 문제점을 식별하여 쇼핑 프로세스의 어떤 부분이 작동하지 않거나 고객을 혼란스럽게 하는지 파악하는 데 도움이 되므로 중요하다.

 

 

플로우 차트

 

 개선된 사항에 대한 프로세스 단계를 정리하기 위해 피그마를 이용하여 플로우 차트를 만들었다. 불필요한 부분은 제외하고 개선할 부분을 위주로 개선된 앱의 모습으로 플로우 차트를 구성하였다.

 

 

레이아웃 그리드

 

 

오토 레이아웃

 

 오토 레이아웃은 개체 간 간격 맞추기와 해시태그나 순위 등 동일한 디자인에 대하여 텍스트의 변화에 따라 동적으로 자연스럽게 조정하기가 가능하게 한다.

간격 맞추기

왼쪽 원본, 오른쪽 복제 후 텍스트 변경

 오토 레이아웃의 기능이 없다면 레이어를 늘려줄 때마다 나머지 요소들도 함께 조정해줘야 한다. 하지만 오토 레이아웃의 기능으로 레이어 너비에 따라 자연스럽게 조정된다. 

 

 

 

 

---

1. 이번주 수업에서 좋았던 점은? 

• 비전공자의 입장에서 처음 배운 툴과 프로젝트 과정이었지만 강사님께서 정말 기초부터 알려주셨다.
• 도구만 배우는 수업이 아니라 프로젝트를 통한 과정이기 때문에 내가 어떤 식으로 문제 파악 및 진행을 해야 하는지 알 수 있었다.

 

2. 이번주에 새롭게 배운 점은? 

• 사전에 UI/UX 차이에 대해 알아보고 왔지만 여전히 헷갈리는 부분이 있었다. 이 부분에 대해서 확실히 알 수 있었다.
• 피그마라는 툴에 대한 기본적인 사용법을 알 수 있었다.

 

3. 배운 것에 관해서 내가 부족했던 부분은? 

• UX 과정에서 내가 좀 더 깊게 사고 하면 좋겠다.
• 아직 피그마 사용이 서툴러 다른 사람들과 비교했을 때 너무 느린 것 같다.

 

4. 앞으로 뭘 더 하면 좋을까? 

• 피그마 사용법에 익숙해진다.
• UX 과정에 대해 깊게 이해하면 더욱 다양한 의견을 제시할 수 있을 것이다.

 

 

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정(B-log) 리뷰로 작성 되었습니다.