본문 바로가기

[내배캠] 프로덕트 디자인 트랙/[내배캠] TIL : Today I Learned

[TIL] D+79 / 최종프로젝트(MVP) - 스타일 지정, 컴포넌트 기획

2025_2_10 월요일

최종프로젝트 D+21

 

 

📝 Lastday I Did
지난주 금요일에 서비스컬러를 선정하고 컬러 시스템을 제작했다. 그리고 우리 서비스 로고디자인을 완료했고,
아이콘제작을 위해 필요한 아이콘을 모아 역할 분담했다.
역할분담한대로 주말동안 아이콘을 제작하고 일요일에는 회의를 통해 수정이 필요한 아이콘을 수정하고,
UT결과를 분석하여 와이어프레임에서 화면 디자인으로 넘어갈 때 개선해야할 점을 정리했다.

 

 

💫 Today I Did

컬러, 폰트스케일, 그림자값을 스타일로 지정하고, 컴포넌트 제작에 들어가기 전에 필요한 컴포넌트 리스트들을 작성하여 리스트들의 구성과 스펙을 논의를 통해 설정했다. 그리고 작성한 리스트들을 역할분담을 위해 나눴다. 🙆‍♂️

 

 

 

 


 

 

 

 

👩‍💻 최종프로젝트 진행과정

 

 

 

오늘은 하루종일 컴포넌트 리스트를 작성하고 각 컴포넌트들의 구성과 스펙을 설정했다.

 

 

우리가 만들어야하는 컴포넌트는 크게 이렇게 나눌 수 있다.(볼드가 내가 맡은 파트!)

  • Button
  • Chip
  • Navigation Bar(App bar, Botom navigation, Status bar등)
  • Tabs
  • Search bar
  • Progress bar
  • Alignment element
  • List(Card/Text)
  • 모달요소(Dialog, Toast, Bottom sheet)

크게 나눈게 이정도고 그 안에는 정말 득실득실하다....

그래서 이 모든 것의 스펙을 설정하는데 오늘 하루 종일을 소비했다....🥹

 

 

 

 

이것이 우리가 제작해야할 컴포넌트 리스트들....^^

 

 

 

 

그리고 터치영역에 대해 이야기하던 중 레퍼런스 분석을 통해 App bar같은 경우에는 좌우 마진 값이 하단의 페이지 마진과 다를 수 있다는 것을 알 수 있었다.

그리고 튜터님을 방문해서 터치영역에 대해 여쭤봤는데, 정말 신기했던건 안드로이드 핸드폰에서는 개발자모드를 켤 수 있다는 사실이다...!

나는 ios를 사용중이라 우리 팀원분께서 개발자 모드를 켜서 확인해 주셨는데, 정말 PC에서 개발자모드를 켠것처럼 앱을 실행하면 모든 영역과 어떤 식으로 묶였는지를 한번에 확인 할 수 있었다....!

 

터치영역은 40정도가 적당하다고 말씀해주셨고,

알려주신 개발자모드를 통해 레퍼런스들을 분석하여 컴포넌트의 스펙을 지정하는데 큰 도움이 됐다

해 보기로 했다!

 

 

 


 

 

 

⭐️  느낀점

오늘 하루종일 팀원들과 컴포넌트를 들여다보면서 정말 다들🫠 이 상태가 되었다...

진짜 너무 진이 빠지고... 진행사항은 안나가는 것 같아서 더욱 불안해지고 총체적 난국이였던 것 같다.

그래도 리스트와 스펙이 모두 정해졌으니, 이제부터는 스퍼트 올려서 빠르게 쳐낼 수 있지 않을까...?🥹

아무래도 우리팀은 3명으로 팀원이 적어서 각 한명에게 할당되는 양이 조금 많은 편이다.

하지만 우리팀원들을 언제나 그랬듯 정말 다들 슈퍼맨이기 때문에 정말 믿음직스럽다 못해 그 이상이다.

나도 그런 슈퍼맨같은 팀원들에 맞춰 노력하다보면 언젠가 그들과 비슷해 질 수 있지 않을까하면서 오늘도 화이팅!!!!!!