[Design] UI 레이아웃 1차안 (#6으로 확정)

[YeEun]

레이아웃 및 페이지명 확정

목적

개발단계로 넘어가기 위한 레이아웃 초안 확정 -> #6 으로 확정

내용 상세

UIUX

figma prototype: ver1

지속적으로 수정되고 있으므로 접습니다.

Flowchart

#8 에서 변경한 관계로 폐기

• miro wireframe
  • miro board invite: as a editor

기타

• 해당 내용 구현 가능한지 여부 확인 필요
  • 텍스트 처리: 텍스트 그대로 추가 할 것인가 이미지로 만들어서 붙여넣을 것인가? 🤔
  • 그 외 결정/구체화 필요한 사안이 있다면 확인
• 디자인 보완 필요
• 내용 보완: 최종 합격자에 따라 달라지는 내용들

[YeEun]

이 부분 한번 보고 피드백 주시면 감사하겠습니다.

디자인

@DohuiKo 님이 주신 아이디어에서 보완해봤지만 디자인... 은 저게 제 한계입니다 😞
홈화면으로 돌아가는 버튼이 너무 애매한데 걸쳐있는데 뭐 어디에 붙일지 모르겠네요 💭
아이디어 있으면 figma에 댓글 or 반영 부탁드립니다.

논의사항

1. 개발 들어가기 전에 확정해야 할 사안들: 레이아웃 외
   • welcome-kit 페이지 좌상단의 0번 컴포넌트 (운영진 캐릭터 아이콘들) 는 rolling-paper 페이지로 이동되므로 개별 분리하실 필요 없습니다
   • 다만 rolling-paper 페이지에서는 운영진 캐릭터를 개별 아이콘화 하여 클릭시 다른 팝업이 나타나도록 만들어야 할 듯 합니다. 가능하신지 확인 필요해요.
   • 이외 구현이 까다로운 레이아웃이 있다면 알려주세요
2. 기술스택: 사용해보고 싶으신 것으로, 경준님 우진님 두분이서 논의해주세요.
3. 개발공수 파악: 보시고 이상 없으면 뼈대부터 바로 짜버리죠~ 시간 남으면 효과 추가하는 방향으로 갑시다.
   @Parkjju @JungWooJin97

[YeEun]

아니... 아니면 데스크탑 폴더형식으로 배치하는것도 괜찮을듯?
js로 커서 변경 가능한가 실제 컴퓨터에서 클릭하는것처럼 커서효과 넣고,
각 항목들은 폴더 (도트컨셉) 로 마련해서 열게 만드는것도 괜찮겠다.

우진님이 마련해주신 페이지가 실물같다기보단 '웹 페이지' 같아서 이쪽 디자인도 고려

[Sun Ah Min]

이 부분 한번 보고 피드백 주시면 감사하겠습니다.

디자인

@DohuiKo 님이 주신 아이디어에서 보완해봤지만 디자인... 은 저게 제 한계입니다 😞 홈화면으로 돌아가는 버튼이 너무 애매한데 걸쳐있는데 뭐 어디에 붙일지 모르겠네요 💭 아이디어 있으면 figma에 댓글 or 반영 부탁드립니다.

논의사항

1. 개발 들어가기 전에 확정해야 할 사안들: 레이아웃 외

   • welcome-kit 페이지 좌상단의 0번 컴포넌트 (운영진 캐릭터 아이콘들) 는 rolling-paper 페이지로 이동되므로 개별 분리하실 필요 없습니다
   • 다만 rolling-paper 페이지에서는 운영진 캐릭터를 개별 아이콘화 하여 클릭시 다른 팝업이 나타나도록 만들어야 할 듯 합니다. 가능하신지 확인 필요해요.
   • 이외 구현이 까다로운 레이아웃이 있다면 알려주세요

2. 기술스택: 사용해보고 싶으신 것으로, 경준님 우진님 두분이서 논의해주세요.

3. 개발공수 파악: 보시고 이상 없으면 뼈대부터 바로 짜버리죠~ 시간 남으면 효과 추가하는 방향으로 갑시다.
   @Parkjju @JungWooJin97

홈화면 돌아가는 버튼은 하단 중간에 딱 넣어줘도 이쁜 것 같아욤 ~!

디자인은 시간날 때마다 보면서 코멘트 달겠습니다. 😆

[YeEun]

@DohuiKo 의 feedback (Figma)

• 요소 하나하나의 크기가 너무 커서 부담스럽다
• 포인트 색상은 전체의 5%정도만
• 기존의 홈 UI가 바깥으로 분산된 경향 있음: 안으로 옮길 것
• guide page (아기사자로 살아남기) 색 통일성을 위해 푸른색보다는 검/주황 유지
• guide page는 위아래 검정색 유지하며 영화보는 경험을 주는것도 좋아보임