안녕하세요. 민철님 :-) 야무입니다.

디자이너의 시안 파일을 토대로 CSS를 작성했을 때 동일한 결과가 나오지 않아 실망하셨을 거에요. 안타깝게도 디자이너가 디자인을 제작하는 환경(예: Photoshop, Sketch)과 CSS를 통해 그려지는 환경(예: 웹 브라우저)이 달라서 정확하게 일치하는 결과가 그려지지 않은 겁니다. :-(

이러한 문제는 웹 환경 뿐만 아니라, 앱 환경에서도 마찬가지 입니다.

디자이너와 개발자의 거리 1px 아티클을 통해 디자인 실무자가 안드로이드 앱 제작 과정에서 디자인 파일을 실제 결과로 만드는데 어떤 문제가 있었는지 이야기하는 것을 읽어보시면 좋을 것 같습니다. :-)

하지만 제작 환경 문제 탓만 할 수는 없겠죠? 몇가지 해결책을 알아보도록 합시다.

1. 디자인 가이드 활용

디자인(설계) 파일에 간격 및 타이포그래피 정보를 시각적으로 확인할 수 있도록 가이드를 만드는 방법입니다. 보다 손쉽게 디자인 가이드를 만들기 위해 Specking과 같은 플러그인을 사용할 수도 있습니다.

장점

CSS 제작자가 한 눈에 수치를 확인하는데 용이합니다.

단점

디자인 가이드를 제작하는 노력이 별도로 요구됩니다. 뿐만 아니라, 가이드 수치에 맞춰도 완벽한 결과를 기대할 수는 없습니다.

2. Zeplin 활용

Zeplin 도구를 사용하면 디자이너의 시안 파일(PSD, Sketch)을 열어 기본적인 레이아웃, 간격, 색상, 타이포그래피 정보를 코드로 얻을 수 있습니다. 자세한 사용 방법은 실무 활용 팁을 읽어보세요.

장점

디자인 파일을 넘겨 받아 눈으로 확인하며 수치 정보를 얻을 수 있습니다. 뿐만 아니라, 이미지 슬라이싱 작업 또한 순탄하게 처리할 수 있습니다.

단점

1개 이상의 프로젝트가 필요하거나, 팀 단위로 활용하기 위해서는 일정 금액을 지불해야 합니다. 즉, 무료가 아닙니다. 뿐만 아니라, 가이드 수치에 맞춰도 완벽한 결과를 기대할 수는 없습니다.

3. 그리드 시스템 가이드라인 + 워크스페이스 활용

제가 사용하고 가르치는 방법입니다. 그리드 시스템 가이드라인을 토대로 디자인된 파일과 동일하게 웹 브라우저 가이드라인을 화면에 표시(JavaScript 활용)한 후, Chrome 개발도구(DevTools)의 워크스페이스(Workspace)를 사용하여 눈으로 확인하며 디자인 시안과 99.9% 동일한 결과를 만들어 낼 수 있습니다. (아래 이미지의 브라우저와 포토샵의 화면을 비교해보세요)

자세한 사용법은 DevTools 작업 영역을 사용하여 지속성 설정을 참고하세요.

장점

디자인 파일 뷰(View)와 같은 완벽에 가까운 결과(99.9%)를 만들 수 있습니다.

단점

디자이너가 그리드 시스템을 사용하여 시안을 만들 줄 모르면 이 방법을 사용할 수 없습니다. 디자이너에게 학습 시간과 노력이 필요합니다.

타이포그래피가 포토샵에서 작업한 결과물이 실제 모니터에 표시되는 view와 동일하게 나타나기 위해선는, 포토샵의 옵션과 css의 옵션이 완전하게 동일해야합니다.

각종 간격, 요소의 영역, font-family, font-weight , font-size, line-height, ect ...

그리고 디자인할때 눈에 보이는 컬러의 경계가 아닌, 각 요소가 가지고 있는 영역에 맞춰서 작업을 해야합니다. 하지만 많은 디자이너가 그렇지는 못할겁니다. 특히 비공식 서체로 디자인을 하는 경우에는 간격이 실제 폰트와 다르게 표시될 가능성이 많기때문에 간격을 맞춘다고 맞췄는데, 실제로는 다른경우가 많이 있습니다. 이 사실을 아는경우도 있고, 모르는 경우도 있지만 어쨌든 많은 디자이너들이 눈으로 봤을 때 완성도 높은 배치를 잡은 다음에, 완전 세세한 옵션보다는 큰 수치들만 가이드문서에 기록하거나 하는 경우가 많습니다. 그래서 디자인파일과, 실제 개발과 차이가 생기게 됩니다.

완벽한 대안은 쉽지 않겠지만 최대한 능률이 올라가는 대안들은 다음과 같습니다.

#1 디자이너와 충분한 대화를 한다.

우선 디자이너에게 포토샾의 수치와 실제 수치가 다르다는걸 인지시키는것이 중요합니다. 디자인 가이드라인문서와 그 수치를 그대로 적용했을 때의 차이를 보여주고, 디자인의 기준이 디자인 파일이 아닌 디스플레이에 있다는 사실을 공유해야합니다.

#2 작업종료전에 최종적으로 디자이너와 디자인QA를 진행한다.

위에 말했듯이, 기술적으로 만들기에 완벽하고 세세한 수치를 건내주면 좋지만, 아닐경우에는 어쩔 수 없이 디자인이미지와 실제 결과물에는 차이가 있을수밖에없습니다. 문서적으로 해결하기 어렵다면 디자이너와 함께 조율하는 시간이 필요합니다. 일정을 잡을때, 디자인 QA를 포함시켜서, 모니터에 보여지는 결과물을 중심으로 디자이너의 눈으로 조율하고, 개발자가 이를 실행해주는 식으로 보통 많이 진행합니다. 좀 지루하고 짜증나게 느껴질수 있지만 매우 중요한 시간입니다.

#3 디자이너가 CSS 수치들을 직접 수정 할 수 있도록 한다.

디자이너에게 깃을 포함한 개발환경을 세팅해주고, 로컬환경에 결과물이 보일 수 있도록 세팅을 해준 후에, 결과물을 스스로 볼 수 있도록 한다음에, 수정이 필요한 부분을 코드로 찾을 수 있도록 최소한의 가이드를 해준 다음에, 디자이너가 만족할만큼 CSS를 수정할 수 있도록 해주는 방법입니다. 디자이너도 바쁜개발자에게 이거해달라, 저거 옮겨달라 부탁하는게 힘들 수도 있으니 직접하는게 가장 좋은 방법일 수 있어요. 위에 CSS라고 하셨으니 웹개발일 가능성이 높아서 이야기해봅니다.