프로젝트 소개

23.12.18(월)~12.22(금)
"A3 스마트 디자이너스"
(팀장) 신소영 (팀원) 송민진, 박소연, 박찬민

---

✅기획
- 기획 의도 :
저희 팀은 스마트한 디자이너가 되기 위한 사람들로 모인 팀입니다. 아직은 열심히 학습하는 수강생인 만큼 가상 워크스페이스 젭(zep)에서 공부하는 우리의 모습을 표현해 보았습니다. 실제 우리의 모습은 아니지만, 캐릭터들이 마치 우리의 분신과 같이 한자리에 앉아서 공부도 하고 다른 수강생들과 대화하는 모습으로 친근하게 표현하고 싶었습니다. 귀엽고 아기자기한 캐릭터와 익숙한 젭 화면으로 만든 저희 조 작업물 재미있게 보셨으면 좋겠습니다. 
- 프로젝트 전체 일정
12.18(월)- 와이어 프레임 짜기, 페이지 전체 레이아웃, 주요 색상, 페이지 구성 및 클릭시 전환 설정(완료)
12.19(화)- 구성 및 프로토타이핑 과정에 대한 방법 논의 - 프로토타이핑을 통한 애니메이션 구현을 어떻게 할지(완료)
12.20(수)- 프로토타이핑 마무리 작업 완료 후, 영상 녹화(시연) 하기(완료)
12.21(목)- 제출(완료)
12.22(금)- 발표
<미니 프로젝트 (A-1) : Chapter 1. 팀 소개 페이지 만들기>
- 역할 분담
팀장 신소영 : 개인페이지, 개인페이지 상세, 랜딩 페이지, 마지막 페이지, 작업 마무리, 프로토타이핑 및 세부 효과, 컴포넌트
팀원 송민진 : 개인페이지, 개인페이지 상세, 랜딩 페이지, 마지막 페이지, 작업 마무리, 프로토타이핑, 컴포넌트, 유저 플로우, 와이어 프레임(아이디어 제시), 일정 계획(세부 일정), 녹화, 발표 
팀원 박찬민 : 개인페이지, 개인페이지 상세, 랜딩 페이지, 마지막 페이지, 작업 마무리, 프로토타이핑, 유저 플로우, 오토레이아웃
팀원 박소연 : 개인페이지, 개인페이지 상세, 랜딩 페이지, 마지막 페이지, 페이지 배경 이미지 관리
- 유저 플로우

- 와이어프레임

그려서 제작

 (1) Figma Community에서 portfolio를 검색하다가 디자이너 작업물을 보고 젭(zep) 워크스페이스가 생각.
 (2) 프로토타이프와 전체 유저 플로우 계획
MBTI를 활용하여 "누구의 것일까?" 궁금증을 유발하고 이어지는 팀원 한명 한명에 대한 관심 유도.
실제 모습과 비슷하게 꾸며진 자신의 아바타 등장. 아바타를 클릭하면 대화창이 생성 되고, 각자 개성을 담아낸 방 안에서 자기 소개 및 mbti, 객관적으로 살펴본 자신의 장점, 자신의 협업 스타일 소개를 대화체로 전달.
이후, 이동 탭에서 스마트 디자이너스 무대방에 모인 팀원들이 함께 대화하는 내용(우리 팀만의 특징과 추구하는 궁극적인 목표, 우리 팀의 약속, 팀원들의 블로그 주소)을 보여주는 것으로 와이어프레임 제작.
✅서비스
-프로토타입
1. 주요 화면
프로젝트의 주요 기능이 담긴 화면을 캡처하여 붙여넣기 한 후, 설명을 작성해주세요.

Splash Screen

(1) Splash Screen page
웹 페이지 첫 화면으로 우리팀(A03 Smart designers)의 소개 페이지 성격이 보이게끔 제작했습니다.

GNB

(2) GNB 탭
모든 페이지에서 공통적으로 보이는 메뉴바 GNB(Global Navigation Bar) 탭 버튼을 만들었습니다.
Smart designers 무대방 버튼과, MBTI 방 버튼을 만들어서 원하는 페이지로 넘어갈 수 있습니다.

LNB

(3) LNB 탭
서브 페이지, 특정 메뉴로 이동할 수 있는 LNB 탭을 만들었습니다.
각자의 개인페이지로 넘어가는 기능을 합니다.

FNB

(4) FNB 탭
최하단 메뉴 FNB를 제작하고, 팀원들의 블로그 링크를 배치했습니다.

2. 피그마 프로토타입 링크 : https://www.figma.com/file/nEcdE1l6LnvtAWf1eKdTwF/3%EC%A1%B0.-%EC%8A%A4%EB%A7%88%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EC%8A%A4?type=design&node-id=0%3A1&mode=design&t=LDzO62nrWtqm6oBI-1

-프로젝트 컬러 및 폰트 시스템 (선택)
컬러는 각자 선택했습니다. 소연님은 하늘, 민진님은 노랑, 찬민님은 파랑, 소영님은 분홍.
폰트는 기본 제공 폰트(Inter)를 사용했습니다.
-컴포넌트 (선택)
우리팀의 컴포넌트는 아래 이미지와 같습니다.
좌측 상태바, 캐릭터, 우측상단 탭, 하단 탭, 사진이미지 탭, 아이콘 탭, 커서 탭, 로딩 탭, 클릭 텍스트, 메뉴 버튼 등이 있습니다.

>> PPT 프로젝트 발표 녹화