웹사이트 제작을 맡기실 때 가장 많이 하시는 걱정입니다. 피그마 시안이랑 똑같이 나오나요?
솔직하게 말씀드리면 픽셀 단위로 똑같이는 나오지 않습니다. 그리고 똑같이 나오는 것이 목표가 되어서도 안 됩니다.
이유가 있습니다. 시안은 정해진 크기의 그림이고, 웹사이트는 크기가 계속 변하는 화면이기 때문입니다.
30초 요약
- •시안은 한 폭의 그림이고 웹사이트는 변하는 화면입니다.
- •글꼴, 줄바꿈, 스크롤바에서 반드시 차이가 납니다.
- •중간 폭이 문제입니다. 시안에 없는 900px 에서 무엇이 어떻게 될지 정해야 합니다.
- •똑같이가 아니라 의도대로가 기준이어야 합니다.
- •시안에 상태를 함께 그려 두면 차이가 크게 줄어듭니다.
왜 완전히 똑같이는 안 되는가
글꼴이 다르게 그려집니다
같은 폰트여도 브라우저와 운영체제마다 두께와 자간이 조금씩 다르게 표현됩니다. 시안에서 두 줄이던 문장이 웹에서 세 줄이 되기도 합니다.
화면 폭이 정해져 있지 않습니다
시안은 보통 1440px 로 그립니다. 그런데 방문자의 화면은 1280일 수도, 1920일 수도, 그 사이 어디일 수도 있습니다. 시안에 없는 폭에서 무엇이 어떻게 될지는 시안이 알려주지 않습니다.
스크롤바가 폭을 먹습니다
윈도우에서는 스크롤바가 화면 폭을 차지합니다. 1440으로 맞춘 화면이 실제로는 1425 정도가 됩니다. 딱 맞게 그린 요소가 밀리는 이유입니다.
시안은 사진이고 웹사이트는 영상에 가깝습니다.
한 장면이 아니라 계속 변하는 상태를 다뤄야 합니다.
그래서 무엇을 기준으로 삼는가
저희가 쓰는 기준은 하나입니다. 똑같이가 아니라 의도대로.
시안에서 이 문장이 두 줄로 떨어지게 그리셨다면, 중요한 건 두 줄이라는 사실이 아니라 이 문장이 한눈에 읽혀야 한다는 의도입니다. 폭이 좁아지면 세 줄이 되더라도 그 의도는 지켜집니다.
반대로 의도를 모르면 개발자는 숫자만 맞춥니다. 그러면 시안과 같아 보이지만 실제 화면에서는 어색해집니다.
차이를 줄이는 방법
상태를 함께 그려 주세요
버튼에 마우스를 올렸을 때, 목록에 데이터가 없을 때, 글자가 예상보다 길 때. 이 세 가지만 시안에 있어도 결과가 크게 달라집니다.
가장 긴 문구로 그려 주세요
시안에는 보통 짧고 예쁜 문구가 들어갑니다. 실제 데이터는 그보다 깁니다. 가장 긴 경우로 한 번 그려 보시면 레이아웃이 버티는지 미리 알 수 있습니다.
색과 간격에 이름을 붙여 주세요
값 대신 이름으로 주고받으면 화면마다 다른 회색이 생기지 않습니다. 방법은 디자인 외주에서 받아야 할 것은 시안이 아니라 토큰입니다에 있습니다.
중간 폭 하나를 정해 주세요
데스크톱과 모바일만 그리면 그 사이가 비어 있습니다. 900px 정도에서 어떻게 되어야 하는지 한 장만 더 있어도 논쟁이 사라집니다.
프레이머로 만들면 조금 다릅니다
프레이머는 디자인 도구와 웹사이트가 같은 화면에서 다뤄집니다. 그래서 시안을 그리는 사람이 실제 동작까지 확인하면서 만들 수 있습니다.
이 방식의 장점은 차이가 나중에 발견되지 않는다는 점입니다. 폭을 줄여 보면 그 자리에서 무너지는 게 보입니다. 시안과 구현이 분리되어 있을 때 생기는 왕복이 줄어듭니다.
옮기는 과정에서 무엇이 넘어가고 무엇을 다시 만드는지는 피그마에서 프레이머로 옮길 때에 정리했습니다.
자주 묻는 질문
피그마 시안과 100퍼센트 똑같이 만들어 달라고 요구해도 되나요?
요구하실 수는 있지만 권하지 않습니다. 특정 폭에서만 똑같아지고 나머지 폭에서 어색해집니다. 의도를 함께 전달하시는 편이 결과가 좋습니다.
차이가 어느 정도면 정상인가요?
글자 줄바꿈 위치, 몇 픽셀 단위의 간격 차이는 정상입니다. 다만 색이 다르거나 요소 순서가 바뀌었다면 그건 확인이 필요합니다.
모바일 시안이 없어도 되나요?
있는 편이 훨씬 좋습니다. 없으면 개발 쪽에서 판단해서 만들게 되고, 나중에 다시 고치는 일이 생깁니다. 프로젝트가 어긋나는 흔한 원인은 웹사이트 제작 프로젝트가 실패하는 가장 큰 이유에 정리했습니다.
정리하면
피그마 시안은 똑같이 재현하는 대상이 아니라 의도를 전달하는 문서입니다.
상태를 함께 그리고, 가장 긴 문구로 확인하고, 중간 폭 하나를 정해 주세요. 이 셋만 해도 완성된 화면과 시안 사이의 거리가 크게 줄어듭니다.
함께 읽으면 좋은 글
피그마 파일을 웹으로 옮기는 방법이 고민이시면 상담 신청을 남겨주세요. 지금 파일 상태를 보고 어떤 방식이 맞는지 먼저 정리해 드립니다. 진행 방식과 포함 범위는 요금제 페이지에서 보실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 파일 구성과 프로젝트 규모에 따라 다를 수 있어 결과를 보장하지 않습니다. 우리 프로젝트에 맞는 방향이 궁금하시다면 편하게 상담 신청해주세요.
