본문 바로가기

UXUI 디자인 입문(23.12.18~24.01.29)/[01.23~01.29] ▸ UI 팀 프로젝트 - B03조

[미니프로젝트] Chapter 2. UI 구조 분석 기반의 클론디자인(2)

24.01.23(화)~01.29(월)
"B03 우대(우리는 대머리조)"
(팀장)이호균 (팀원)송민진, 안지선, 장민준


- 2024.01.24(수)
미니프로젝트 쳅터2. UXUI 디자인 입문, Figma활용법 강의를 토대로 팀원들과 본격적 협업을 시작했다.
발제내용은, UI 구조 분석 기반의 클론 디자인이다. 클론 디자인의 뜻을 살펴보자면 아래와 같다.
(1) 실제 존재하는 앱/웹 서비스 화면을 동일하게 그려보는 작업하기
(2) 단순히 따라하기 보다는, Web, iOS, Android 각 디바이스 환경에 맞는 규격이나 표준을 공부하기
(3) 어떻게 구성했을 때 가장 사용성이 뛰어나고 UI/UX적으로 좋은 디자인인지 고민해보기

3시 모임 시작. 캡처 화면 공유(iPhone mini13) 각자 맡은 페이지 유저 플로우차트 그리기 진행 및 정보구조도 제작.
Linkedin UI Kit 가져와서 구버전 버튼을 신버전으로 수정 후 컴포넌트 작업하기.
핵심기능 파악 등 step4 진행 하기. 등을 했다.
우선 링크드인 앱을 잘 사용해 보지 않아서, 이것 저것 만져보느라고 시간을 많이 할애했다. 앱에 대한 적응 시간이 필요했고, 그에 따라 세세한 구조적인 분석을 진행했다. 내가 맡은 부분은 홈화면탭이다. 그 부분에 있어서 플로우 차트를 만들었다. 정보구조도도 만들어 보았다.

👉🏻프로젝트 전체 일정
-23일(화) : 서비스 선정(APP), 서비스별 사용자의 핵심 행동 파악, 사용자의 서비스 이용 과정 제작
-24일(수) : 사용자의 서비스 이용과정 마무리, 해당 화면들의 UI 구조 분석, 클론디자인 시작
-25일(목) : 클론디자인 진행
-26일(금) : 클론디자인 진행, 발표자료 정리
-29일(월) : 과제 제출(10시), 발표&피드백(14시)
* 제출 : AI, 노션, 피그마 페이지


오늘의 할 일,
1. 사용자의 서비스 이용과정 마무리
2. 해당 화면들의 UI 구조 분석
  - 홈 화면 분석
   ①프로필 변경 버튼 - 완성시키기
   ②발견 탭 - 화제 인물 팔로우 제안, 대한민국 거주자들이 팔로우하는 페이지(지역기반), 페이지 맞춤 추천, 인기페이지, 회원님을 위한 맞춤 추천, 대한민국 거주자들이 팔로우하는 사람
  - 전체적인 사용 : 앱을 깔고 첫 회원가입부터 진행했다. 우선 회원가입하기 전에 간단한 플래쉬 애니메이션으로 온보딩 화면이 나온다.
이 앱의 기능에 대해, 이직과 인맥관리 그리고 경력계발 아티클 수신이라고 알려준다. 이 앱의 기능에 대해 가입하기 이전에 간단하게 보여주어 사용자에게 앱 용도에 대해 잘 이해시키고 있다. 이후, 기존의 사용 메일로 가입절차를 간단하게 진행 할 수 있다. 이용 약관 양식은 길다. 
약관 동의 후에 바로 프로필을 완성시키는 튜토리얼이 진행된다. 이 앱의 핵심 기능 세가지는 다음과 같다.
(1)프로필 완성하세요, (2)관련된 분야의 페이지 또는 사람을 팔로우 하세요, (3)나의 지인과 1촌을 맺으세요.
이 세가지를 완성하면 자연적으로 내 홈피드에 내가 관심을 갖고 있는 직종의 게시글을 접할 수 있다.
프로세스는 가입부터 튜토리얼 진행까지 잘 따라온다면 쉽게 정착할 수 있는 것 같다.
다만, 튜토리얼 진행이 너무 길고, 상세한 내용을 입력해야해서 당장 시간을 많이 사용하지 못하는 사용자라면 불편 할 것 같다.
정확하고 상세한 내용을 입력해야 하기 때문에, 사전 준비가 필요하다.
  - 탭의 프로세스 : 프로필 완성, 팔로우 스타트, 1촌 맺기를 통해 맞춤 추천 제공.
  - 어떤 컴포넌트가 쓰였는지 보기 : 맞춤 추천, 지역 기반 서비스
3. 클론 디자인
  - IA 제작

  - 플로우차트 제작 :

홈화면 플로우차트 제작