[UXUI] 스파르타 UXUI 1주차 미니 프로젝트 - 피그마로 팀소개 페이지 회고

1. 페이지 컨셉 잡기

우선 팀 소개 페이지의 특성을 헤아려 봤다.

 

1) 지금 짜여진 팀이란?

:  1주일이라는 단기간 내에만 유효한 팀이며, 이 팀의 목적은 개개인의 특성을 최대한 나태내는 것에 그친다. > 이벤트성 페이지도 가능

 

2) 각 팀원들은 어떤 사람이지?

:  각자의 개성이 뚜렷했고, 자유롭고 융통성이 높은 MBTI P 성향을 가졌다. 각 팀원들의 개성을 최대한 많이 담아 낼 수록 매력적인 콘텐츠가 될 것이다. > 팀원들의 개성을 살리는 컨셉츄얼한 페이지

 

3) 결론

a. 이벤트성 페이지로 컨셉츄얼한 프로모션st로 가도 될 듯.

b. 팀 소개라는 프로덕트는 각기 다른 사람들을 한 곳에 모아 소개하는 공간이다. 각자의 페이지에서 개개인의 개성을 최대한 살리지만, 함께 모여 있어도 팀의 조화로운 모습을 강조할 것.

a+b.
- 웹 브라우저 컨셉 : 브라우저 시스템 또한 각기 다른 사이트창들을 한 곳에 모아 볼 수 있다는 특성을 가진다. 사파리, 크롬, 웨일 등 각 브라우저 체제 컨셉 속에서 다양한 페이지들이 존재하며, 한 모니터 안에 모여 있지만 위화감이 들지 않는다는 점을 디자인적으로 차용한다
- B급 키치 컨셉 : 팀 자체 분위기인 자유로움, 발랄함, 통통 튐, 젊음(?), 가벼움, 밍숭맹숭를 담을 수 있는 부드럽고 키치한 톤앤매너를 가져간다. A급 정석적으로 웹브라우저 운영 체제를 전부 가져가지 않고, UI적 필수 요소들만 차용한다.

 

위 내용들을 모두 짜집기하여 아래 무드보드를 완성했다.

 

 

2. 페이지 구상하기

 

1) 유저 플로우에 따라,

메인페이지, 팀소개 페이지, 각 팀원 소개 페이지(4개) 총 6개의 페이지의 와이어 프레임을 제작하기로 했다.

a. 메인 페이지 : 유저의 이목을 이끌기 위한 페이지로 구성. 지루하지 않고 보는 재미가 있도록 할 것.

b. 팀 소개 페이지 : 팀명을 포함한 팀 소개, 팀 페이지(노션, 피그마), 팀원별 페이지로 이동할 수 있는 버튼으로 구성

c. 팀원 소개 페이지 : uiux 내일배움캠프에서의 목표, 자신을 설명하는 키워드(or 아이콘) 3개, 협업 스타일, 좋아하는 것(카드형식 ui)으로 구성

a+b+c.
- 전체적으로 명확한 컨셉과 톤앤매너를 잃지 않도록 할 것.
- 유저가 UX적으로 익숙치 않은 기능을 넣지 않을 것.
- 브라우저 시스템 디자인 차용은 macOS이지만 mac을 사용하지 않은 유저에게 혼란을 주지 않을 정도로만 차용할 것.

 

2) 디자인 전개 

a. 메인페이지
:  zep 메타버스 안에서 각자 아바타 부캐로 사이버 공간에 모일 수 있고, 이 자체로 키치한 컨셉추얼 무드를 만들어 낼 수 있다. zep에 함께 모여 있는 모습을 짧은 동영상으로 보여주면서 WARNING 모달창을 사용해 다음 페이지로 가는 액션을 유도한다.

b. 팀 소개 페이지
: 팀 페이지(노션, 피그마) 바로가기 링크는 웹브라우저 체제 톤앤매너와 맞춰 데스크톱 바로가기 아이콘 형식을 차용한다.
macOS 디자인 차용의 연장선상으로, 팀 목표 및 팀 규칙 메시지 레이아웃은 iOS imessage에서 따와 톤앤매너를 지킨다.
팀 목표와 규칙은 자동 스크롤로, 유저가 따로 액션을 취하지 않아도 정보를 볼 수 있도록 한다.
레이아웃 율동감을 주어 키치하고 자유로운 무드를 형성한다.
팀명은 팀 로고를 활용할 수 있는 폰트로 지정한다.
각 팀원 마다 고유 컬러를 지정한다.

c. 팀원 소개 페이지
: 각 팀원 페이지가 하나의 큰 창으로 보이도록 레이아웃을 구성한다.
나를 설명하는 키워드와 연관된 아이콘이 깜빡깜빡 번갈아가며 보여진다. 키치하고 재미있는 요소를 부여. 많고 긴 텍스트를 짧게 끊어 읽히도록 하여 지루함을 뺀다.
좋아하는 것은 카드 UI로, 클릭시 해당 주제와 관련된 사진들이 딤드된 백그라운드에 콜라주 형식으로 뿌려진다. 키치함 요소 +a

 

3. 구현에 신경 쓴 점

전체적으로는 팀 소개 페이지 자체 목적이 디자인에 함몰되지 않도록 노력했다. 어디까지나 팀(원) 소개에 초점을 맞춘 사이트라는 것을 명심하면서 유저의 사용성을 헤치지 않았으면 했다.

1) 웹 UI 특성

: 웹 장점을 살려 많은 정보를 한 페이지에 담을 수 있음, 유저가 가장 소극적인 액션에도 많은양의 정보를 전달 할 수 있도록 구성

2) 재미성

: 이벤트성 컨셉츄얼한 페이지에 걸맞게, 예외적인 구성이나 재미있는 요소들을 넣어 지루함 탈피

3) 톤앤매너

: 전체적인 연결성을 헤치지 않도록 레이아웃, 프로토타입을 구성했다.
메인 > 팀소개 > 팀원 소개로 넘어 갈 때, 각 창들이 줄어들거나 커지면서 다음 페이지로 이동하는 모습을 연출하면서 모든 페이지가 유기적으로 연결 되어 있다는 의미를 전달하고자 했다.

 

4. 아쉬운 점

 

1) 메인페이지

: 모달에서 사용자가 액션(알아보러가기 버튼 클릭)을 해야만 다음 페이지로 넘어가게 된다.
웹페이지 UX의 특성으로 고려해 사용자의 가장 소극적인 액션에도 최대한 많은 정보를 펼쳐 낼 수 있다는 점을 더 활용해 본다면, 모달창 아래 nn초 뒤에 자동으로 넘어갑니다.. 같은 문구를 노출시키고, after delay 효과로 다음 페이지(팀 소개)로 넘어가는 것을 함께 구현하면 좋았을 것 같다.

 

2) 개인페이지

: 개인 키워드와 아이콘이 하나씩 깜빡깜빡 거리는 프로토타입 재현에 실패했다. 시간 부족과 능력 부족.. 다음번엔 더 프로토타입 구현에 신경 써서 디자인 완성도를 높여봐야겠다.

 

3) 레이아웃 네이밍 정리

: P의 저주인가. 레이아웃 네이밍 정리가 하나도 안 된다. 덕분에 스마트애니메이션, 컴포넌트 정리하는데 애를 많이 먹었다. 여러명이서 같이 하는 작업은 네이밍 정리가 최우선이 되어야 더 효율적으로 일할 수 있는 것 같기도..