메인으로 이동

안녕하세요. DX사업부입니다.🌸

디자이너라면 한 번쯤 이런 경험이 있을 것입니다.
며칠을 공들여 완성한 화면을 본 퍼블리셔에게 단번에 “이건 CSS로 구현이 까다로워요”라는 피드백을 받은 경험.
가끔은 마크업이 완료된 화면이 디자인과 전혀 다른 결과물일 때의 당혹감!

이런 일은 디자인과 퍼블리싱이 기대하는 결과물은 같지만 출발점이 다르기 때문에 생기곤 합니다.
디자이너는 사용자가 무엇을 느끼는지를 중심으로 생각한다면,
퍼블리셔는 그 느낌이 실제로 화면에 어떻게 구현될 수 있는지를 고민합니다.

디자이너가 그린 여백 하나, 색 하나에는 이유가 있고, 퍼블리셔는 그 이유를 코드로 번역해 브라우저 위에 옮겨놓습니다. 그 과정에서 디자이너의 언어와 퍼블리셔의 언어는 종종 어긋납니다. 디자이너에게 ‘자연스러운 움직임’은 퍼블리셔에게 ‘움직임의 속도감과 시간’으로 바뀌어야 하고, 디자이너에게 ‘깔끔한 정렬’은 퍼블리셔에게 ‘어떤 단위와 어떤 브레이크포인트’의 문제가 됩니다.

둘 다 틀리지 않았습니다.
다만 서로가 쓰는 언어가 달랐을 뿐입니다.





협업 초기, 가장 먼저 한 일은 퍼블리셔와 함께 화면 구조를 들여다보는 것이었습니다.
디자이너 눈에는 단순한 카드 리스트처럼 보이는 UI가, 마크업 안에서는 어떤 구조로 짜느냐에 따라 전혀 다른 결과물로 이어집니다.
반대로 디자인에서 자연스럽게 쓴 절대 위치의 요소가 반응형 환경에서 예상치 못하게 무너지는 경우도 있었습니다.

어느 쪽이 맞고 틀린 게 아니었습니다.
그렇기 때문에 역할에 맞는 논리를 서로 이해하는 것이 중요하다고 생각했습니다.
프로젝트 초기에 함께 맞춰둔 구조 하나가 이후 수십 번의 수정을 막아줬고, 나중에 고치는 것보다 처음부터 같은 그림을 그리는 편이 결국 모두에게 빠른 길이었습니다.





초기에 디자이너는 완성된 시안을 퍼블리셔(UD)에게 넘기고 결과를 기다리는 경우가 많았습니다. 그런데 결과물을 받을 때마다 크고 작은 차이가 생겼고, 끝없는 토론 끝에 ‘시안만으로는 의도를 온전히 담기 어렵다’는 문제를 도출할 수 있게 됐습니다.

디자인 그룹에서 찾은 해결 방법은 “디자인 시스템”인데요.
프로젝트 초기에 디자이너와 퍼블리셔(UD)가 함께 엣지 케이스를 미리 정의하고, 인터랙션 의도를 함께 적어두는 방식이죠.
디자인 시스템을 만들어 두자, 케이스가 생길 때마다 판단해야 할 여지가 줄어들어 결과적으로 웹사이트에 구현되는 결과물이 디자인 의도에 훨씬 가까워지는 성과도 얻었습니다.









디자인과 코드 사이의 최적점은 완벽한 시안이나 완벽한 마크업 안에 있지 않습니다.


그리고 그 ‘함께’의 범위는 점점 넓어지고 있습니다.
디자이너와 퍼블리셔의 협업이 ‘디자인 시스템’이라는 공통 언어를 낳았듯, 앞으로는 기획자, 개발자, AI 도구까지 같은 테이블에 앉게 될 것입니다. 

중요한 건 도구가 늘어난다고 해서 협업의 본질이 달라지지는 않는다는 점입니다. 누가 어떤 언어를 쓰든, 서로의 맥락을 이해하고 기준을 함께 세우는 일은 여전히 사람이 해야 할 가장 중요한 작업으로 남습니다.