[원티드 프리온보딩] TIL - (19)

5월 29일

Session

디자인 과정에서 색상 선택할 때

빨간색이라고 해서 다 같은 빨간색이 아니다. 다른 색상들도 그렇다. 따라서 ‘rgb(255,0,0)`과 같은 색상은 멀리하고 채도와 명도도 적절히 조절된 색상을 사용하도록 해야 한다. 또한 텍스트에 #000과 같은 검정색을 사용하면 너무 진하게 보여서 촌스러울 수 있기 때문에 최소한 ‘rgb(12,12,12)’는 사용하도록 한다.

기업 별로 사용하는 색상들을 제시하기도 하므로 직접 찾아보며 색상을 조절해 나가는 것도 현명한 방법이다.
예시) 🔗애플이 사용하는 색상

🔗Adobe Color

색상 추출, 조합, 비교 등 색상과 관련한 다양한 작업을 할 수 있다. 이미지로부터 색상을 추출하는 것도 가능하며 키워드에 따른 색상을 검색하는 것도 가능하다.

지도 API 활용

카카오 지도 API와 구글 Maps API를 활용하여 앱에 지도를 연동할 수 있다. Typescript를 함께 활용하려면 npm과 github을 잘 참고해봐야 한다.

컴포넌트의 확장성

컴포넌트를 작성하기 시작할 때부터 확장성을 고려해서 작성하면 너무 거창해질 수 있다. 따라서 우선 어느 정도 상황들에 맞게 컴포넌트를 작성하여 사용하다가, 여러 곳에서 반복적으로 사용되는 것이 확인되고 props를 통한 재사용이 가능할 것으로 생각되면 공통 컴포넌트로 분리하면 된다. 즉, 상황에 맞춰 통합과 분리를 해야 한다.

모아데이터 과제 진행 현황

팀원들과의 회의를 통해 회원 상세 정보 페이지의 Datepicker와 전체적인 페이지 레이아웃 및 SNB, GNB, Breadcrumb을 맡게 되었다. 과제를 진행하기 전 기획서를 철저히 분석 하기 위해 의문점이 있을 경우 그냥 지나치지 않고 끝까지 고민하거나 멘토님에게 물어보았다. 이후 프로젝트 초기 설정 통일을 위해 내가 자체적으로 만들어나가고 있는 초기 템플릿을 기반으로 설정을 통일하였고, 덕분에 초기 세팅은 빠르게 끝났다. 회의를 하고 나니 팀원들도 모두 자신이 진행해야 할 부분에 대해 이해를 한 것 같고, 나 또한 내가 진행해야 할 부분을 이해했기에 과제의 시작은 우선 순조로운 것 같다. 오늘은 SNB, GNB, MainLayout 처럼 기본적인 틀을 잡아놓았으며 내일은 Datepicker와 Breadcrumb을 완성해볼 계획이다.