"다은 님, 이번에 테스트 계정 세팅해야 하는데 프로필 이미지 한 20개만 '뚝딱' 그려주실 수 있나요? 그냥 귀엽고 간단하게요."
스타트업에서 일하다 보면 기획자나 개발자로부터 가장 많이 듣는 무서운 단어가 바로 '뚝딱'과 '간단하게'입니다. 이 추상적인 요청을 그대로 받아들여 일러스트레이터 켜고 펜 툴을 잡는 순간, 우리는 지옥문을 여는 것입니다. 처음엔 간단해 보이지만, 하나를 그리면 "다른 헤어스타일은 없나요?", "표정이 좀 더 다양했으면 좋겠어요"라는 피드백이 쏟아지기 때문입니다.
우리는 UI/UX 디자이너이지, 일러스트레이터가 아닙니다. 픽셀 하나하나의 논리를 따지기도 바쁜 시간에 단순 반복 작업을 하고 있을 여유는 없습니다. 오늘은 이런 무리한 리소스 요청을 3초 만에 방어하고, 개발자에게 사랑받는 에셋을 전달할 수 있는 도구 하나를 소개합니다.
Square Face Generator입니다.
이 툴을 단순히 '귀여운 얼굴 만들기 장난감'으로 치부하면 오산입니다. 이 도구는 철저하게 '시스템화된 디자인'의 효율성을 보여주는 훌륭한 사례입니다.
왜 굳이 이 툴을 써야 하는가? (feat. 공대생 마인드)
제가 이 툴을 생존 도구로 꼽는 이유는 단순히 귀여워서가 아닙니다. 개발 친화적이고, 시스템적으로 설계되어 있기 때문입니다.
1. 무한 생성, 그러나 통일된 톤앤매너
직접 20개의 아이콘을 그리면 미묘하게 선 굵기가 달라지거나 스타일이 어긋날 위험이 있습니다. 하지만 이 제너레이터는 정해진 알고리즘 안에서 조합을 만듭니다. 수백 개를 찍어내도 Stroke Weight(선 두께)와 Color Palette(색상)가 균일하게 유지됩니다. 즉, 별도의 검수 없이 바로 UI에 적용해도 이질감이 없습니다.
2. SVG 포맷 지원 (핵심)
가장 중요한 포인트입니다. 단순히 JPG나 PNG로만 떨어지는 툴은 실무에서 쓸모가 없습니다. 해상도 대응이 안 되기 때문입니다. 이 툴은 벡터 기반의 SVG 다운로드를 지원합니다.
- 반응형 웹에서 사이즈가 늘어나도 깨지지 않음
- 개발자가 코드 상에서 색상 값을 직접 커스텀(Fill color 변경)하기 용이함
- 파일 용량이 비트맵 이미지보다 훨씬 가벼움
3. 랜덤과 커스텀의 적절한 조화
완전 랜덤 버튼을 눌러 빠르게 대량 생산을 할 수도 있고, 특정 파라미터(피부색, 안경 유무, 수염 등)를 고정해서 바리에이션을 칠 수도 있습니다. 이는 유저 페르소나별(예: 관리자용, 일반 유저용, 차단된 유저용) 아이콘을 구분해야 할 때 논리적인 근거를 마련해줍니다.
실무 적용: 개발자에게 Handoff 할 때의 팁
그냥 "여기 사이트 가서 만드세요"라고 링크만 던져주면 안 됩니다. 그건 디자이너의 직무 유기입니다. 우리는 '문서 깎는 노인'의 자세로 개발자가 고민할 필요가 없도록 떠먹여 줘야 합니다.
Step 1. 목적에 따른 분류 및 생성
기획 요청 사항을 분석합니다.
- Type A: 일반 유저 (밝은 표정, 다채로운 배경색)
- Type B: 익명 유저 (무채색 배경, 선글라스 착용)
이 기준에 맞춰 제너레이터로 에셋을 추출합니다.
Step 2. 파일 네이밍 규칙 준수
다운로드한 파일 이름인 download.svg 그대로 넘기면 개발자가 싫어합니다. 프로젝트의 네이밍 컨벤션에 맞춰 변경합니다.
ic_avatar_user_default_01.svg
ic_avatar_user_anonymous_01.svg
Step 3. 피그마 컴포넌트화
추출한 SVG를 피그마로 가져와 Variants로 묶습니다. 이렇게 하면 나중에 디자인 시스템에서 한 번에 관리할 수 있고, 개발자도 Inspect 패널에서 속성값을 쉽게 확인할 수 있습니다.
결론: 손이 빠르다고 일을 잘하는 게 아니다
주니어 시절엔 펜 툴로 빠르게 베지어 곡선을 따는 게 실력이라고 착각했습니다. 하지만 진짜 실력은 '내가 굳이 하지 않아도 될 일을 시스템과 도구에게 위임하는 판단력'에서 나옵니다.
단순 반복 작업에 쏟을 에너지를 아껴서, 사용자가 왜 이 버튼을 눌러야 하는지에 대한 UX 로직을 짜는 데 투자하세요. 기획자가 급하게 "이미지 좀..."이라고 말할 때 당황하지 말고, 이 툴을 켜서 10분 만에 50개의 고퀄리티 SVG를 뽑아내고 칼퇴합시다. 그것이 우리가 추구해야 할 '효율'입니다.
