Showing Posts From

컬러

컬러 코드 #000000은 너무 강해요, 라고 말했을 때 개발자의 표정

컬러 코드 #000000은 너무 강해요, 라고 말했을 때 개발자의 표정

컬러 코드 #000000은 너무 강해요, 라고 말했을 때 개발자의 표정 어제 개발팀 핸드오프 미팅이었다. 새로 만든 디자인 시스템 컬러 토큰 설명하는 자리. 준비 많이 했다. 피그마에 토큰 정리도 깔끔하게 해놨고. "이번에 Primary Text는 #000000 대신 #1A1A1A로 갈게요." 민수씨가 물었다. "왜요? 검은색이면 000000 아닌가요?" 심호흡. "000000은... 너무 강해서요. 눈이 피곤하거든요." 그때 그 표정. 지금도 생각나면 웃긴다.검은색이 검은색이 아니라니 디자이너 아닌 사람한테 설명하기 제일 어려운 게 이거다. 순수한 검은색은 사실 잘 안 쓴다는 것. 자연에 순수한 검은색은 없다. 그림자도, 밤하늘도, 검은 머리카락도. 다 조금씩 컬러가 섞여있다. #000000을 쓰면 화면이 딱딱해 보인다. 특히 흰 배경 위에 올리면 대비가 너무 강해서 눈이 아프다. 그래서 살짝 밝게 조정한다. #1A1A1A, #2D2D2D, #333333 이런 식으로. 근데 이걸 말로 설명하면. "그게 그거 아닌가요?" 아니다. 전혀 그거가 아니다. 민수씨가 다시 물었다. "그럼 1A1A1A가 뭔데요?" "음... 약간 회색이 섞인 검은색이요." "그럼 회색이네요?" "아니요, 검은색이에요. 근데 좀 부드러운." 이 대화가 5분 계속됐다.개발자는 틀리지 않았다 사실 민수씨 말도 맞다. RGB 값으로 보면 #000000이 가장 검은색이다. 26, 26, 26이랑 0, 0, 0이랑 차이가 뭐냐고 물으면. 숫자로는 26의 차이다. 근데 눈으로 보면 다르다. 느낌이 다르다. 분위기가 다르다. 이걸 어떻게 설명하지. "민수씨, 이거 한번 봐보세요." 피그마 화면 공유했다. 좌우로 배경 두 개 놓고. 하나는 #FFFFFF에 #000000 텍스트. 하나는 #FFFFFF에 #1A1A1A 텍스트. "이거랑 이거 느낌이 다르지 않아요?" 민수씨가 한참 봤다. "음... 살짝?" "그렇죠! 살짝!" 승리의 순간이었다. 그런데. "근데 이거 구현할 때 color-neutral-900 이렇게 변수로 쓰면 되는 거죠?" "네... 근데 한 가지만 더요. 다크모드에서는 이게 또 달라요." 민수씨의 표정이 다시 굳었다.번역의 기술 지금은 좀 나아졌다. 디자이너 6년 차면 개발자 언어로 번역하는 법을 배운다. "이 컬러는 접근성 기준 AA를 만족해요." 이렇게 말하면 민수씨가 고개를 끄덕인다. 숫자가 나오면 안심하는 것 같다. "000000은 명도 0%인데, 1A1A1A는 10%예요." 이것도 먹힌다. 퍼센트는 마법이다. "구글 머티리얼도 #212121을 쓰거든요." 이건 결정타다. 구글이 하면 다들 납득한다. 근데 가끔은 숫자로 설명 안 되는 게 있다. "이게 더 세련돼 보여요." "이게 브랜드 톤이랑 맞아요." "이게 그냥... 더 좋아요." 이럴 땐 그냥 솔직하게 말한다. "저를 믿어주세요. 제 전문 영역이에요." 다행히 우리 팀 개발자들은 좋은 사람들이다. 어떻게든 이해하려고 노력한다. 같은 언어를 찾아가는 시간 작년에 신입 개발자가 들어왔다. 첫 협업 때 내가 말했다. "버튼 라운드를 8px에서 12px로 올릴게요." 그 친구가 바로 이해했다. "border-radius: 12px 이렇게요?" 감동했다. 요즘 개발자들은 디자인 용어를 안다. CSS를 알면 대화가 쉽다. 반대로 나도 배웠다. 개발 제약을 이해하는 것. "이 그라데이션 너무 예쁜데, 구현 어려우시면 단색으로 갈게요." "애니메이션 들어가면 성능 이슈 있죠? 줄일게요." "이거 컴포넌트로 만들어놓으면 재사용 쉬우시죠?" 이렇게 말하면 개발자들 표정이 밝아진다. 협업은 결국 번역이다. 내 언어를 상대 언어로. 감각을 논리로. 느낌을 숫자로. 완벽하게 번역되진 않는다. 뉘앙스가 사라진다. 하지만 그게 일이다. 여전히 어려운 순간들 그래도 가끔은 막막하다. 대표님이 "이거 좀 더 임팩트 있게" 하실 때. 임팩트를 수치화할 수 없다. 마케터가 "더 럭셔리한 느낌으로" 요청할 때. 럭셔리의 RGB 값은 없다. 기획자가 "감각적으로 해주세요" 할 때. 감각은 사람마다 다르다. 이럴 땐 레퍼런스를 찾는다. "이런 느낌 말씀하시는 거죠?" 이미지로 보여주는 게 백 마디 말보다 낫다. 그리고 여러 버전을 만든다. A안, B안, C안. "어느 게 가장 임팩트 있어 보이세요?" 객관식으로 만들면 대화가 쉬워진다. #1A1A1A의 승리 그 미팅 이후로 3주 지났다. 어제 민수씨가 슬랙 DM 보냈다. "최디자님, 이번에 작업하면서 느낀 건데요." "1A1A1A가 진짜 더 부드럽네요." "다른 앱들도 보니까 다 순수한 검은색 안 쓰더라고요." 읽고 웃었다. 답장했다. "그쵸? ㅎㅎ 이제 보이시죠?" "다음엔 그림자 blur 값도 설명해드릴게요." 민수씨가 이모지 하나 보냈다. 😱 미안 민수씨. 디자인의 세계는 깊다. 하지만 고마워. 이해하려고 노력하는 게. 내 말을 들어주는 게. 그게 협업이니까. 그래서 오늘도 오늘 기획팀 미팅이 있다. 새로운 기능 UI 설명하는 자리. 준비는 다 했다. 피그마 프로토타입도 만들어놨고. 인터랙션도 넣어놨고. 분명히 누가 물어볼 것이다. "이 버튼 색깔은 왜 이래요?" 그럼 나는 심호흡하고 대답할 것이다. 숫자로, 레퍼런스로, 때로는 감각으로. 완벽하게 전달되진 않을 것이다. 하지만 괜찮다. 어제보다 조금 더 가까워지면 된다. 서로의 언어를. 서로의 세계를. 그게 디자이너의 일이니까.#000000과 #1A1A1A의 차이를 이해시키는 데 5분, 신뢰를 쌓는 데 6년.