디자인 파일 넘겨받기
디자이너에게 예쁜 화면 그림만 받으면 만들 수가 없어요. 그 화면을 다시 만들 수 있는 재료, 그러니까 색과 글꼴과 간격의 값까지 받아야 개발이 시작돼요.
쉽게 말하면
전단지를 인쇄소에 맡기던 날을 떠올려 보세요. 다른 사람이 카톡으로 보내 준 전단지 사진을 인쇄소에 그대로 넘기면 인쇄가 안 돼요. 인쇄소가 달라는 건 글자와 그림이 따로 살아 있는 원본 파일이에요. 디자인을 넘겨받는 일이 정확히 이거예요. 예쁜 화면 그림을 받는 게 아니라, 그 화면을 다시 만들어 낼 수 있는 재료를 받는 거예요.
그래서 이 일의 성패는 시안이 예쁜지가 아니라 받은 것으로 만들 수 있는지에서 갈려요. 화면 배치 스케치로 무엇을 어디에 둘지 정했다면, 그다음이 이 자리예요.
받은 날은 만족스러워요. 만들기 시작하면 색을 화면에서 찍어 쓰고 여백을 눈대중해요. 결과가 시안과 미묘하게 달라지고, 그 차이를 맞추는 작업이 통째로 새 비용이 돼요.
받는 데 하루가 더 걸려요. 대신 만드는 쪽이 짐작할 일이 없어지고, 나중에 화면을 한 개 더 늘릴 때도 같은 값을 그대로 써요.
무엇을 받아야 하나
목록으로 외워 두면 대화가 짧아져요. 일곱 가지면 충분해요. 오른쪽 칸이 이 문서에서 가장 값이 나가는 부분이에요. 없을 때 무슨 일이 생기는지를 알아야 받아 낼 힘이 생겨요.
| 받을 것 | 왜 필요한가 | 없으면 생기는 일 |
|---|---|---|
| 편집 원본 접근 권한 | 화면을 눌러서 색과 크기 값을 직접 읽을 수 있어요 | 만드는 사람이 전부 눈대중해요. 나중에 화면 하나를 더 만들 때 또 사람을 불러야 해요 |
| 색 값 목록 | 같은 파랑이 화면마다 조금씩 다른 일을 막아요 | 버튼 색이 페이지마다 미묘하게 달라져요. 손님은 이유를 모른 채 어수선하다고 느껴요 |
| 글꼴 이름과 굵기 | 그 글꼴을 웹에서 쓸 수 있는지 판단할 수 있어요 | 비슷한 글꼴로 대체돼요. 시안과 다른 인상이 나오고, 심하면 사용 조건 문제가 생겨요 |
| 여백과 크기 값 | 화면이 좁아졌을 때 무엇을 먼저 줄일지 정해져요 | 휴대폰에서 글자가 붙거나 버튼이 잘려요. 화면 폭에 맞추기 단계에서 되돌아와요 |
| 로고 원본 | 명함·간판·배너에 다시 쓸 수 있어요 | 캡처본을 확대해 쓰다가 가장자리가 뭉개져요. 인쇄물에서 특히 티가 나요 |
| 아이콘 묶음 | 메뉴와 버튼에 들어갈 작은 그림이 한 세트로 맞아요 | 굵기와 모양이 제각각인 아이콘이 섞여요. 아이콘 한 세트로 맞추기를 다시 사야 해요 |
| 사진 원본과 사용 범위 | 그 사진을 광고에도 쓸 수 있는지가 정해져요 | 시안에만 쓸 수 있는 사진을 실제 사이트에 올려요. 나중에 내려 달라는 연락을 받아요 |
받는 시점은 잔금 전이에요
이 목록은 작업이 끝난 뒤에 부탁하면 잘 안 와요. 이미 다음 일로 넘어간 뒤니까요. 그래서 순서가 하나 있어요. 넘겨받을 목록을 계약할 때 적고, 그 목록이 다 온 다음에 마무리 대금을 보내요. 계약서에 한 줄로 적어 두면 다툴 일이 없어요.
그림 파일이면 되는 거 아니에요
여기가 가장 많이 헷갈리는 자리예요. 파일이 다 같은 그림처럼 보이지만, 성질이 두 갈래로 갈려요. 점으로 찍힌 그림과 선으로 그려진 그림이에요.
| 파일 종류 | 어떤 파일인가 | 어디에 쓰나 |
|---|---|---|
| jpg | 점으로 찍힌 사진이에요. 확대하면 뭉개져요 | 실제 사진에 써요. 로고나 아이콘에는 안 맞아요 |
| png | 점으로 찍힌 그림인데 배경을 비울 수 있어요 | 배경 없는 로고에 써요. 다만 확대 한계는 jpg와 같아요 |
| svg | 선과 면의 좌표로 그려져요. 아무리 키워도 안 깨져요 | 로고와 아이콘의 정답이에요. 색도 나중에 바꿀 수 있어요 |
| 편집 원본 | 디자이너가 실제로 작업한 파일이에요. 요소가 낱개로 살아 있어요 | 값을 읽거나 화면을 새로 늘릴 때 여기서 꺼내요 |
| 글꼴 파일 | 글자 모양이 든 파일이에요. 쓰는 조건이 따로 있어요 | 웹에 올려도 되는지 먼저 확인해요. 글꼴과 저작권을 같이 봐요 |
확인해 보세요
디자이너가 로고를 png 한 장으로 보내 줬어요. 간판과 명함에도 쓰려면 무엇을 더 달라고 해야 할까요?
넘겨받는 순서
맡기든 직접 하든 순서는 같아요. 사장님이 파일을 열어 볼 일은 없지만, 무엇이 아직 안 왔는지는 셀 수 있어야 해요. 여섯 걸음이에요.
- 1받을 목록을 먼저 적어요. 위의 일곱 줄을 그대로 옮겨 적으면 돼요. 작업이 시작되기 전에 오가야 하는 종이예요.
- 2어디에 담아 줄지 정해요. 카톡으로 흩어 보내면 두 달 뒤에 못 찾아요. 폴더 하나에 모아 링크로 받는 편이 나아요.
- 3화면을 폭 두 가지로 받아요. 넓은 화면과 휴대폰 화면이에요. 하나만 받으면 나머지 하나는 만드는 쪽이 지어내게 돼요.
- 4값 목록을 눈으로 확인해요. 색 코드와 글꼴 이름이 글자로 적혀 있는지만 보면 돼요. 그림 안에만 있으면 아직 값이 아니에요.
- 5글꼴 사용 조건을 물어요. "이 글꼴을 우리 사이트에 올려서 써도 되나요" 한 줄이면 돼요.
- 6작은 화면 하나로 시험해요. 받은 재료만으로 한 화면을 만들어 보고, 막히는 곳이 있으면 그때 마저 요청해요.
장면 1 · 디자이너가 시안을 보내며 말했다
“일단 시안 먼저 보시고, 파일은 확정되면 정리해서 드릴게요.”
정상적인 말이고 거절할 필요도 없어요. 다만 여기서 한마디를 붙여요. "정리해서 주실 목록을 지금 같이 적어 둘까요." 확정 뒤에 부탁하면 이미 다음 일로 넘어간 뒤라 답이 늦어져요. 목록을 지금 합의해 두면, 나중에 요청이 아니라 확인이 돼요.
헛돈이 새는 자리
이 문서의 한 줄 뜻이 "헛돈을 안 쓴다"인 이유가 이 표예요. 디자인 값이 아니라 다시 하는 값이 새어 나가요.
| 새는 상황 | 왜 돈이 되나 | 미리 막는 한마디 |
|---|---|---|
| 화면을 하나 더 만들어야 해요 | 값 목록이 없으면 새 화면도 디자이너를 다시 불러야 해요 | "값 목록을 받아 두면 비슷한 화면은 제 쪽에서 늘릴 수 있을까요" |
| 휴대폰에서 배치가 무너져요 | 좁은 폭 시안이 없어서 만드는 쪽이 지어냈어요 | "휴대폰 폭 화면도 같이 주세요" |
| 글꼴을 통째로 바꾸게 됐어요 | 웹에 못 올리는 글꼴이라 전 화면 글자 인상이 바뀌어요 | "이 글꼴 웹 사용이 되나요" |
| 로고를 다시 그려야 해요 | 캡처본만 남아서 간판·명함에 쓸 크기가 안 나와요 | "로고는 선으로 그려진 원본으로 주세요" |
| 사진을 전부 교체했어요 | 시안용으로만 쓸 수 있는 사진이었어요 | "이 사진들 실제 서비스와 광고에도 써도 되나요" |
장면 2 · 개발을 맡은 쪽이 견적을 올리며 말했다
“시안대로 맞추는 작업이 생각보다 오래 걸려서요.”
화를 낼 자리가 아니라 무엇이 없어서 오래 걸리는지 물을 자리예요. 대개 답은 셋 중 하나예요. 값이 그림 안에만 있거나, 좁은 폭 시안이 없거나, 아이콘이 낱개로 안 왔거나예요. 원인을 알면 디자이너에게 30분짜리 요청 하나로 끝나요. 모르면 그 시간이 그대로 개발 비용이 돼요. 견적서가 갑자기 늘어난 이유의 상당수가 여기 있어요.
받은 값을 실제로 쓰기
값 목록은 종이로 두면 아무 일도 안 일어나요. 만드는 자리에 그대로 옮겨 적을 때 값이 생겨요. 색 코드와 글꼴 이름, 여백 숫자를 문장으로 적어 주면 짐작이 사라져요. 값이 여러 화면에서 반복되기 시작하면 색과 간격을 이름으로 관리하기로 넘어가요.
직접 해보기
받은 값을 그대로 적어 보세요
스튜디오에서 만들고 있는 화면이 있으면, 시안에서 읽은 값을 그대로 적어 보세요. "버튼 색은 이 코드로, 제목 글꼴은 이 이름으로, 위아래 여백은 이 숫자로 맞춰 주세요." 값이 적힌 문장과 "예쁘게 해 주세요"의 결과 차이를 한 화면에서 바로 볼 수 있어요.
스튜디오 열기자주 묻는 것
- Q. 디자이너 없이 제가 직접 만드는 중인데도 이 문서가 필요한가요?
- 필요해요. 받을 상대가 사람이 아닐 뿐이에요. 색과 글꼴과 여백을 한 장에 적어 두면, 나중에 화면을 늘릴 때 같은 값을 그대로 쓰게 돼요. 그 종이가 없으면 화면마다 조금씩 다른 파랑이 쌓여요.
- Q. 편집 원본을 달라고 하면 실례인가요?
- 실례가 아니라 보통이에요. 다만 계약에 따라 갈려요. 보기 권한만 주는 곳도 있고, 파일을 통째로 넘기는 곳도 있어요. 그래서 시작할 때 한 번 정해 두는 편이 서로 편해요.
- Q. 시안이 예쁜데 개발이 어렵다고 해요. 누가 맞나요?
- 둘 다 맞을 수 있어요. 화면에서 아름다운 것과 손가락으로 누르기 좋은 것은 다른 문제예요. 이럴 때는 "어느 부분이 오래 걸리나요"를 물어서 하나씩 값을 매겨요. 전부를 다시 그리는 대신 한두 곳만 바꿔서 끝나는 경우가 많아요.
- Q. 글꼴은 그냥 비슷한 걸로 바꾸면 안 되나요?
- 바꿔도 되는 경우가 많아요. 다만 두 가지를 먼저 봐요. 글자 굵기가 달라지면 화면 인상이 크게 바뀌고, 글자 폭이 달라지면 버튼 안에서 글자가 넘칠 수 있어요. 바꾸기로 했으면 제목과 버튼 두 곳을 먼저 확인해요.
- Q. 받은 파일을 어디에 보관해야 하나요?
- 가게 계정으로 만든 폴더 한 곳이면 돼요. 중요한 건 위치가 아니라 주인이 사장님인지예요. 디자이너 개인 계정 폴더에만 있으면, 연락이 끊긴 날 로고 원본도 같이 사라져요.
하나 더
외주 계약을 시작하는 날이에요. 디자인 관련해서 지금 해 두면 가장 이득인 일은?
더 깊이 (안 읽어도 괜찮아요)
왜 값이 그림 안에 있으면 안 되나 · 시안 이미지에 "파랑 #2F6BFF" 라고 글자로 써 넣어도, 만드는 사람은 그걸 손으로 옮겨 적어야 해요. 옮겨 적는 과정에서 오타가 나고, 화면이 스무 개면 스무 번 옮겨요. 값 목록이 글자 형태로 따로 있으면 복사해서 붙이면 끝이에요. 사소해 보이지만 화면 수가 늘수록 이 차이가 시간으로 쌓여요.
받을 화면 폭을 두 가지로 정하는 이유 · 폭이 하나뿐이면 그 사이의 모든 화면은 누군가 지어내야 해요. 넓은 화면과 좁은 화면 두 장이 있으면 그 사이는 규칙으로 채울 수 있어요. 무엇이 먼저 줄고 무엇이 아래로 내려가는지가 두 장 사이에서 읽히니까요. 태블릿 폭까지 세 장을 받으면 더 좋지만, 두 장이 바닥이에요.
디자인 시스템으로 넘어가는 시점 · 화면이 다섯 장쯤까지는 값 목록 한 장으로 버텨요. 화면이 늘고 사람이 늘면 목록으로는 부족해져요. 같은 버튼이 세 군데에서 조금씩 다르게 만들어지기 시작하면 그때가 신호예요. 그 지점에서 디자인 규칙 모음으로 넘어가요. 처음부터 규칙을 만드는 건 대개 이르고, 값 목록조차 없이 화면만 늘리는 건 항상 늦어요.
이것만 기억하세요
- ·그림을 받는 게 아니라 그 화면을 다시 만들 재료를 받는 일이에요
- ·받을 것은 일곱 가지예요. 편집 원본·색·글꼴·여백·로고·아이콘·사진 사용 범위
- ·받을 목록은 작업 시작할 때 적고, 다 온 뒤에 마무리 대금을 보내요
- ·로고와 아이콘은 확대해도 안 깨지는 원본으로 받아요
- ·값이 그림 안에만 있으면 아직 값이 아니에요. 글자로 적힌 목록이어야 해요