프리랜서 디자이너를 위한 필수 온라인 툴킷
이미지 최적화, 색상 코드 변환, 파비콘 생성, SVG 정리까지 — 클라이언트 작업에 필요한 모든 도구를 설치 없이.
지난 화요일 밤 9시에 클라이언트가 메시지를 보냈어: "로고를 32x32 파비콘이랑 180x180 Apple 터치 아이콘으로 보내줄 수 있어요? 아, 그리고 우리가 쓴 그 파란색 hex 코드가 뭐였죠?"
노트북밖에 없었어. 포토샵도 없고. 일러스트레이터도 없고. 브라우저만 있었어.
15분 후에 전부 보냈어. 방법을 알려줄게.
"클라이언트가 특정 사이즈를 원해" 문제
이건 끊임없이 일어나. 클라이언트가 Open Graph용으로 정확히 1200x630, 쇼핑몰용으로 800x800, 그리드용으로 150x150 썸네일이 필요해. 이미지 하나에서 세 가지 다른 사이즈.
단순 리사이즈에 풀 디자인 앱을 여는 건 편의점 갈 때 트럭을 모는 것 같아. 그냥 빠르고 정확한 게 필요해.
이미지 넣고, 크기 설정하고, 다운로드. 몇 초면 끝. 일주일에 두 번은 쓰니까 브라우저 탭을 고정해놔.
색상 코드 혼란
개발자는 hex를 달라고 해. 인쇄소는 CMYK를 원해. 브랜드 가이드라인엔 RGB가 적혀있어. 클라이언트는 팬톤 번호를 보내면서 "CSS 버전"을 물어봐.
색상 변환은 사소해 보이지만 하루에 다섯 번째 하고 있을 때 그렇지 않아. 아무 색상 포맷이나 붙여넣으면 다른 모든 포맷을 바로 돌려주는 곳이 있으면 진짜 시간이 절약돼.
꿀팁: 변환 후에 자주 쓰는 브랜드 색상을 북마크해둬. 다음에 찾는 수고를 덜어줘.
파비콘은 의외로 복잡해
파비콘은 단순해 보여 — 작은 아이콘이잖아. 하지만 현대 브라우저와 기기는 실제로 여러 사이즈가 필요해: 브라우저 탭용 16x16, 북마크용 32x32, iOS 홈 화면용 180x180, Android용 192x192.
이걸 전부 하나의 원본에서 생성하려면 포토샵을 열고, 각 사이즈를 수동 내보내기하고, .ico 포맷으로 변환해야 했어. 20분짜리 지루한 작업.
파비콘 생성기를 쓰면 한 번 업로드로 필요한 모든 사이즈를 받아. 이제 모든 웹사이트 납품에 이걸 포함해.
납품 전 SVG 정리
일러스트레이터랑 피그마는 SVG를 내보낼 때 잡동사니를 많이 붙여 — 편집기 메타데이터, 불필요한 그룹, 속성이어야 할 인라인 스타일, 너무 높은 소수점 정밀도.
8KB여야 할 SVG가 50KB인 건 흔한 일이야. 아이콘 하나면 상관없어. 하지만 페이지에 40개 아이콘 세트가 있으면 빠른 로딩과 느린 로딩의 차이가 돼.
개발자에게 보내기 전에 SVG를 SVG 최적화에 돌려. 깨끗한 마크업에 고마워할 거고, 작은 파일 크기가 페이지 성능에 도움이 돼.
클라이언트 납품물 압축
클라이언트는 압축에 관심 없어. 웹사이트가 빨리 로드되고 이메일 첨부파일이 너무 커서 거부당하지 않는 것에 관심이 있어.
이미지를 보내기 전에 압축을 해. 제품 사진 20장 포트폴리오가 눈에 보이는 품질 손실 없이 80MB에서 12MB로 줄어들 수 있어. "이거 다운로드 끝이 안 나네"와 "받았습니다, 감사합니다!"의 차이야.
실제 워크플로우
클라이언트 에셋 납품의 실제 프로세스:
- 클라이언트가 지정한 정확한 크기로 리사이즈
- 품질 손실 없이 파일 크기를 줄이기 위해 압축
- 특정 포맷 코드가 필요하면 색상 변환
- 웹 프로젝트면 파비콘 생성
- 개발자에게 넘기기 전에 SVG 최적화
전체 에셋 세트에 대략 10분 걸려. 설치할 소프트웨어 없고. 구독도 없고. 브라우저 탭만 있으면 끝.
브라우저 도구가 프리랜서에게 좋은 이유
프리랜서로 일할 때 세팅에 쓰는 모든 시간은 무보수야. 클라이언트 컴퓨터에 있을 수도 있고, 카페 노트북일 수도 있고, 태블릿일 수도 있어. 어떤 브라우저에서든, 어떤 기기에서든 로그인 화면이나 체험판 제한 없이 작동하는 도구 — 그게 프리랜서를 지속 가능하게 만드는 것.
최고의 도구는 생각할 필요가 없는 도구야. 필요할 때 그냥 작동하고, 방해하지 않고, 클라이언트가 실제로 돈을 내는 창의적인 작업에 집중할 수 있게 해줘.