CoStudo 프로젝트 12주차 주간 회고록 🙂
2022.11.28(월) - 29(화)
TIL 🧐
- 자스 스터디
- 프로토타입, 실행컨텍스트 복습
- 프로젝트
주절주절 😗
제이미가 만든 모노레포로 옮겨 작업 중인데 작동이 잘된다..!
아쉬워요 🙁
하지만 내가 babel을 잘 몰라 사용 적응하는데 좀 걸렸다 ^_ㅠ
잘했어요 🙂
table PR 반영 끝..!
2022.11.30(수)
TIL 🧐
- 프로젝트
- Table PR 반영
- 디자인 시스템 palette
아쉬워요 🙁
하루종일 졸려서 애먹었다.. 코로나 약 마지막이였는데 먹으면 너무 졸리다..
잘했어요 🙂
Table 이제 진짜 끝..
2022.12.01(목) ~ 12.02(금)
TIL 🧐
- 프로젝트
- linear 디자인 시스템 관한 글
- palette 시멘틱 네이밍으로 변경
- 디자인 시스템 컬러 네이밍 정하기
- MUI Palette
- github palette 참고 (개발자 툴)
주절주절 😗
palette 네이밍도 여러 방식이 있구나..
MUI, github, 배시시(배민 디자인 시스템) 등을 참고해서 palette 네이밍을 찾아봤는데 세 곳다 지정하는 방식이 조금씩 다르다.
MUI는 완전 시멘틱 네이밍이고 github는 상황별 네이밍, 배시시는 상황별 + 시멘틱이 섞어쓰고 있다.
상황별 네이밍이 개발자들이 선호한다는 부분에 동감이 갔다. 파란 컬러의 버튼이 hover됐을 때 배경 색을 바꾸고 싶으면 color를 btn-primary-hover-bg 로 바로 찾아서 정해주면 되니 컬러를 일일히 비교하지 않아도 된다.
그러나 상황별로 지정할 경우 상황 때마다 palette에 추가해줘야 해서 너무 많아진다는 단점도 있다. 실제로 github에서 보면 컬러가 엄~청 많다.
< github에 _dark.scss >
...
--color-header-logo: #f0f6fc;
--color-header-search-bg: #0d1117;
--color-header-search-border: #30363d;
--color-sidenav-selected-bg: #21262d;
--color-menu-bg-active: #161b22;
--color-input-disabled-bg: rgba(110,118,129,0);
--color-timeline-badge-bg: #21262d;
--color-ansi-black: #484f58;
--color-ansi-black-bright: #6e7681;
--color-ansi-white: #b1bac4;
--color-ansi-white-bright: #ffffff;
--color-ansi-gray: #6e7681;
--color-ansi-red: #ff7b72;
--color-ansi-red-bright: #ffa198;
--color-ansi-green: #3fb950;
--color-ansi-green-bright: #56d364;
--color-ansi-yellow: #d29922;
--color-ansi-yellow-bright: #e3b341;
--color-ansi-blue: #58a6ff;
--color-ansi-blue-bright: #79c0ff;
--color-ansi-magenta: #bc8cff;
--color-ansi-magenta-bright: #d2a8ff;
--color-ansi-cyan: #39c5cf;
--color-ansi-cyan-bright: #56d4dd;
--color-btn-text: #c9d1d9;
--color-btn-bg: #21262d;
--color-btn-border: rgba(240,246,252,0.1);
--color-btn-shadow: 0 0 transparent;
--color-btn-inset-shadow: 0 0 transparent;
--color-btn-hover-bg: #30363d;
--color-btn-hover-border: #8b949e;
--color-btn-active-bg: hsla(212,12%,18%,1);
--color-btn-active-border: #6e7681;
--color-btn-selected-bg: #161b22;
--color-btn-focus-bg: #21262d;
--color-btn-focus-border: #8b949e;
--color-btn-focus-shadow: 0 0 0 3px rgba(139,148,158,0.3);
--color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1,4,9,0.15);
--color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31,111,235,0.3);
--color-btn-counter-bg: #30363d;
--color-btn-primary-text: #ffffff;
--color-btn-primary-bg: #238636;
--color-btn-primary-border: rgba(240,246,252,0.1);
--color-btn-primary-shadow: 0 0 transparent;
...
그래서 상황별 + 시멘틱을 섞어쓴 배시시가 MUI보다는 많고 github보다는 적은거 같다. 그래서 나도 이렇게 상황별 + 시멘틱 네이밍으로 수정했는데 피어세션 시간 때 다들 색깔이 많지 않아 시멘틱으로도 충분하지 않냐고 생각해서ㅠ
결국 시멘틱 네이밍으로 바꿨다.
장단점이 있지만 나중에 사이트가 커지면 섞어쓰는게 좋을 듯 하다!
아쉬워요 🙁
고민하는건 좋지만 진도가 너무 느린거 같다. PR에 리뷰를 받고 수정하면 되지라는 마음으로 고민이 길어지면 일단 PR을 보내 토론하자고 생각 중인데 자꾸 붙들게 되는거 같다.
그리고 수정하고 나면 다시 리뷰를 요청해야하니.. 다들 할 일이 있는걸 알아서 이 방법도 안좋은거 같다. 고민의 적당선을 생각해보자.
잘했어요 🙂
예전에는 스스로 생각해보는게 좋다고 생각해서 혼자 고민하는 시간이 많았었다. 그런데 팀플젝을 하면서 팀원들이 다른 라이브러리를 참고 하는 모습을 보면서 나도 혼자만의 생각에 갇혀있지 말고 다른 사람(라이브러리)들이 어떻게 했는지 참고하면서 스스로 생각해보게 된거 같다.
palette 안에 이름 정하는데도 규칙들이 있는걸 보면서 더 많이 찾아보고 참고하는 습관을 들여야겠다고 생각 중이다.
