포토샵에서의 타이포그래피 설정과 브라우저 상에서 렌더링되는 CSS와 차이가 납니다.

조회수 1702회

디자이너분들이 보통 가이드선을 글자 경계에 딱맞춰서 PSD파일을 건네주시는데 그 가이드라인을 기준으로 CSS를 적용하게 되면 실제 브라우저에서는 조금 다르게 나오는거 같습니다.

글자크기라던가 위아래 마진 간격, 자간등등 실제 디자인과 동일하게 하는 노하우 같은게 있을까요?

2 답변

  • 좋아요

    4

    싫어요
    채택 취소하기

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

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

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

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

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

    1. 디자인 가이드 활용

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

    장점

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

    단점

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

    디자인 가이드 예시

    2. Zeplin 활용

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

    Zeplin 인터페이스

    장점

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

    단점

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

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

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

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

    장점

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

    단점

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

    포토샵 가이드

    • 다양한 툴과 여러가지 방법이 있군요. 선생님이 말씀해주신것 중에 3번째 그리드 시스템을 이용하는것이 비용이나 결과 만족도에서 제일 효율성이 높을것 같은데.. 디자이너 분하고 같이 공부를 해봐야겠는데 이것 역시 쉽지 않겠네요 ㅜㅜ.... 혹시 그리드시스템에 대해서 공부할수 있는 교재나 강의는 없을까요? 프론트엔드_김민철 2018.4.20 10:33
    • 제가 집필한 책 만들면서 배우는 모던 웹사이트 디자인 내용에는 디자이너가 그리드 시스템을 공부할 수 있도록 구성되어 있어요. ^^ 한동안은 패스트 캠퍼스 오프라인 교육에서 디자이너에게 현장 교육을 하기도 했는데 현재는 패캠이랑은 온라인 교육만 하고 있습니다. 야무 2018.4.20 10:46
  • 타이포그래피가 포토샵에서 작업한 결과물이 실제 모니터에 표시되는 view와 동일하게 나타나기 위해선는, 포토샵의 옵션과 css의 옵션이 완전하게 동일해야합니다.

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

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

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

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

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

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

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

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

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

    • 디자이너분하고 협업이 역시 중요하네요... 답변 감사드립니다! 프론트엔드_김민철 2018.4.20 10:12

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.