4일
5일
- Test 에 대한 단상
- TDD가 한때 인기를 끌었었다.
- 지금은 그만하지 못한데, 그 이유는 여럿일것이다.
- 대표적으로는 Test가 어려운 형태에 대한 Test를 가능하게 하는데에 대한 노력이 적지 않게 드는것이다.
- 이는 생산성의 저하로 이어진다.(논란의 여지는 있겠지만.)
- 대부분은 Test를 작성하는데 어렵지 않지만, 복잡한 component 연결이 필요할때는 복잡해진다.
- Test Driven이 빛을 발할때는 복잡한 로직을 작성할때인데, 안타깝게도 복잡한 component 연결과 영역이 겹치는 경우가 있다.
- 80%의 일을 할때는 20%의 노력만으로 가능하지만 나머지 20%를 할떄 80%의 노력이 든다.
- TDD는
Driven Developer에서 보이듯 적용하기 어려운 나머지 20%도 cover하려는 유혹을 떨치기 힘들게 한다.
- 결국 20%의 test coverage를 위해 Test를 위한 구조 개선에 고생하고, Logic 대신 Test를 어떻게든 작성하기 위해 노력한 기억만 남는다.
- Test를 tool 로써 바라보면 test coverage 는 하나의 지표에 지나지 않는다.
- 80%의 test coverage도 사실 굉장한것이다.
6일
- Color
- 모티브: UI/UX를 하면서 가장 Programic 하면서도, 심플하게 Lighter color, darker color의 variation 을 사용하고 싶었음.
- color space(system)
- RGB
- 3원색 조합, 인간의 직관과 가장 멈(eg. 보라색 어떻게 만들어? -> 머릿속에서 색상 조합을 해봐야 함)
- HSL
- 다른 3요소로 색상을 표현
- Hue: 색상의 종류(색상환에서 고르듯 수치를 정하면 됨, 보라색 -> 숫자 하나로 표현 가능)
- Saturation: 채도, 색상환에서의 반지름, 색이 진하고 연하고를 표현
- Light: 밝기, 어둡고 밝은 정도를 표현
- LCH
- HSL의 단점을 보완, HSL은 수치와 인간의 인지는 차이가 있음.
- example(https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/)
- Hue
- hsl(30, 100, 50) 은 오렌지색 hsl(50, 100, 50) 은 노란색으로 보임.
- hsl(230, 100, 50), hsl(250, 100, 50) 은 둘다 파란색으로 보임,
- 수치적으로는 둘다 20차이
- light
- hsl(60,100, 50)은 샛노랑색, hsl(230, 100, 50) 은 새파랑색이지만 눈으로 보면 노랑색이 훨씬 밝아 보임
- hsl(0, 100, 50)은 새빨강색, hsl(0, 100, 80) 은 파스텔톤 핑크로 보임, 색깔이 약간 다른 톤을 띄게 보임.
- 그래서 이런 수치적 일관성을 보정한것이 LCH
- Light, Chroma, Hue
- 적어도 Light 와 Hue는 사람의 직관과 어느정도 일치하고 수치적 일관성도 있음.
- Chroma는 알기 힘들지만(값도 이론적으로는 무한대로 올라갈수 있고), 나머지 두개가 일관적인것을 택한듯
- 물론 LCH 가 색공간이 더 넓은 장점도 있음.
- OKLCH
- 따라서 현재 Light, Darker 표현에 적합한 color space 는 OKLCH 일것으로 보임
- color space의 역사는 인간의 비 선형적 인지를 선형적인 수치로 모델링하기 위한 노력.
- 번외:
- RGB에서 어떻게 HSL 로 변환 하는가?
- grayscale 을 따라 color cube 를 돌려서 극 좌표계로 변환
- https://youtu.be/pjo3wP_yt2A
- 인지적 관점에 대한 고려 없이 수학적 모델링으로 변환했으므로 당연히 인지적 관점과 차이가 있을수 밖에…
12일
- Landing Page 관련 UI/UX 용어
- hero-contents
- key visual(거의 사어에 가까움)
- value proposition
- feature 로 대신 하기도 함.
- 보통은 3개로 제시함.
- 참고
14일
26일