Logo Image

Strawberry Fields

Still under construction

  • 1) 색을 수치로 표현한다는 것은 실제로 어떤 과정을 거치는가?

    CIE 1931 색도학(Colorimetry)은 인간의 시각 체계가 다양한 스펙트럼 분포를 어떻게 색으로 인식하는지를 설명하기 위한 이론적·실험적 기반을 제공한다. 나뭇잎과 초록색 자동차처럼 겉보기에는 같은 색으로 보이지만 실제 반사 스펙트럼은 전혀 다른 경우를 상상해 보면, 같은 색 지각이 서로 다른 물리적 조건에서 발생할 수 있음을 알 수 있다. 이와 같이 서로 다른 스펙트럼 분포가 동일한 색 자극을 유발하는 현상을 메타메리즘(metamerism)이라고 하며, 색 재현의 핵심적인 개념이다.

    Read Article
  • 색 공간과 색상 시스템 이해를 위한 용어 정리 및 시각화

    문제 제기

    최근 아이폰의 컬러 선택 모드에는 기존의 RGB 외에도 “HDR Boost"라는 항목이 추가되었다.
    이 외에도 sRGB, Display P3, DCI-P3 같은 색역(color gamut) 등의 개념이 자주 등장하지만, 개념적 차이를 명확히 이해하지 못한 채 사용하는 경우가 많다. 구체적으로 내가 디자인을 하면서 궁금했던 것들은 다음과 같다.

    1. 최근 아이폰 컬러 선택 모드에 rgb 말고도 HDR Boost 라는게 생겼는데 무엇인지.
    2. 이 외에도 color space - sRGB, Display P3, DCI-p3, 넓은 색 영역, 색 재현 규격 그래프 등이 많은데 알고 쓰는게 좋을 것 같다.
    3. Css 에서도 컬러 모드가 rgba, hex 외에도 hsl, oklch 등 표기법이 많은데 용도의 차이를 알고싶었다.
    4. adobe illustrator 에서도 hsb, 그리고 ‘웹 적합 색상만’ 선택시 아래 사진처럼 색 영역이 단순화 되는데 왜 그런건지 궁금하다.

    항상 색을 공부할 떄면 색채심리학에 치중된 자료들을 접했었는데, 이번에는 질문에 답을 줄 수 있는 과학적인 접근 방식들을 이용해보려 한다. 결과적으로 이러한 배경을 바탕으로 색 관련 용어와 기술 개념을 정리하고자 한다.

    Read Article
  • 과정

    이 글에서는 디자인 시스템의 구성 요소를 실제로 분석하면서 의사 결정 과정에 중점을 둔다. 포트폴리오에 포함할 코드 스니펫 역시 구현 결과물보다는 “왜 이렇게 구현했는가” 하는 결정 이유를 드러내는 범위로 제한하였다. 예를 들어, 특정 스타일 차이를 별도 컴포넌트가 아니라 prop으로 분리한 이유, 여러 스타일 변형을 variant로 설계한 이유, 혹은 디자인 토큰을 직접 참조하지 않고 간접적으로 사용하도록 한 배경 등을 중점적으로 해설한다. 이를 위해 Apple Human Interface Guidelines(HIG), Material-UI(MUI), Coinbase Design System(CDS) 세 가지 디자인 시스템을 Button, Text Input, Modal의 공통 컴포넌트와 CDS에만 있는 AreaChart 컴포넌트를 중심으로 비교하였다. 각 컴포넌트를 디자인 관점과 코드 구현 관점에서 분석하면서, 디자인 토큰 활용, variant 구조, 상태(State) 구성, 접근성 처리 방식 등의 구체 요소를 상세히 정리한다. 분석 방식은 논문 “모바일 운영체제별 GUI 컴포넌트의 사용성 비교 분석을 위한 프레임워크"에서 제안된 분류처럼, 공통 구조, 명칭상의 차이, 기능상의 차이 관점으로 내용을 분류하여 서술한다. 마지막으로 이러한 비교 분석 과정을 통해 얻은 교훈과 학습 효과를 정리하고, 디자인-개발 협업에 주는 시사점을 실용적인 결론으로 제시한다.

    Read Article
  • 목차

    1. 서론: 왜 디자인 시스템 먼저 분석하는가? 왜 Coinbase Design System을 먼저 선택했는가?
    2. 본문: 정체성과 대상 사용자
      • 시스템의 공식 미션 / 슬로건
      • CDS, MUI, HIG 비교 분석
    3. 시스템 아키텍처
      • Get Started에서 주목할 부분: Theming
      • Components
      • Hooks
    4. 디자인 토큰 구조
      • Primitive token과 Semantic token의 결합
      • 컬러 외 영역에서의 토큰 적용
      • Shadow 구조
    5. 결론

    서론: 왜 디자인 시스템 먼저 분석하는가? 왜 Coinbase Design System을 먼저 선택했는가?

    크립토 생태계에서 개발자가 아닌 디자이너로서 어떤 방식으로 기여할 수 있을지에 대해 오랫동안 고민해 왔다. 화면을 설계하는 역할에 머무르기보다는, 제품이 만들어지고 확장되는 과정 전반에서 어떤 지점에 개입할 수 있는지가 더 중요한 질문이 되었다. 그 과정에서 토큰 단위부터 컴포넌트까지 이어지는 디자인 시스템 구축 방식에 자연스럽게 관심이 옮겨갔다.

    Read Article
  • 목차

    1. 토스에서 가장 안 좋은 경험 만들기

    2. 업무 시간을 70% 단축하는 제품 만들기

    3. 문전박대 속 10배 성장한 리서치, 제품을 바꾸다

    4. 외않써?, 뒤에 숨겨진 진짜 문제 짚어보기

    5. 인터렉션, 토스에선 어떻게 개발하나요?

    6. 처음이지만, 낯설지 않은 채권

    7. 오프라인 POS, UX로 뒤집기까지의 3년

    토스에서 가장 안 좋은 경험 만들기

    토스 광고 UX 개선 사례를 공유한 이번 세션은 ‘피할 수 없는 기능’을 어떻게 더 나은 경험으로 바꿔나갈 수 있는지를 중심으로 진행됐다.
    광고는 대부분의 유저에게 불쾌한 요소지만, 서비스 입장에서는 쉽게 제거할 수 없다.
    이 발표자는 그 안에서 ‘불편하지 않은 경험’은 물론, 나아가 유저가 수용하거나 긍정적으로 느낄 수 있는 광고 UX를 만들기 위해 어떤 접근을 했는지 공유했다.

    Read Article