Showing Posts From
한다고
- 21 Dec, 2025
Figma도 해야 한다고?: 디자이너 역할까지 겸임한 개발자
오늘은 디자이너 월요일 아침이다. 슬랙 메시지가 떴다. "로그인 화면 UI 좀 다듬어주세요. 버튼 색이랑 폰트 크기 조정하고요." 나는 개발자다. 근데 디자인 툴을 켜야 한다. Figma를 열었다. 벌써 세 번째 프로젝트다. 처음엔 "임시로만"이라고 했다. 이제 당연하다는 듯이 요청이 온다. 디자이너는 없다. 예산이 없어서다. 대표님 말씀으로는 "요즘 개발자들은 다 디자인도 하더라고요." 그래. 나도 안다. 풀스택이니까. 프론트도 하고 백엔드도 하고 인프라도 본다. 근데 디자인까지?디자인 시스템이 뭔데 "디자인 시스템 좀 만들어주세요." 기획자가 말했다. 디자인 시스템. 들어는 봤다. 구글링을 했다. Material Design, Ant Design, 여러 레퍼런스가 나왔다. 좋아 보였다. 근데 우리 서비스에는 안 맞는다. 결국 직접 만들어야 한다. 버튼 컴포넌트부터 시작했다. Primary, Secondary, Disabled. 색상은 몇 개? 사이즈는? Border-radius는? CSS 짜는 건 익숙하다. 근데 이게 "예쁜지"는 모르겠다. 대표님한테 물었다. "이거 괜찮나요?" "음... 좀 더 모던하게?" 모던. 그게 뭔데. 유튜브로 디자인 강의를 봤다. "UI/UX 기초", "디자인 시스템 만들기", "색채론 입문". 새벽 2시까지 봤다. 다음날 다시 만들었다. 이번엔 좀 나아 보였다. "좋네요! 이거로 가시죠." 드디어 인정받았다. 근데 기쁘지 않다. 내 일이 또 늘었으니까.컬러는 #무엇 색상을 정해야 한다. Primary 컬러는 뭘로 할까. 파란색? 진부하다. 초록색? 너무 자연 친화적이다. 보라색? 우리 서비스랑 안 맞는다. 색상환을 봤다. HSL 값을 조정했다. H 210, S 80%, L 60%. 괜찮아 보인다. 근데 Accessible 하냐고 물어본다. 뭐가 Accessible 한지 몰랐다. 또 구글링이다. WCAG 2.1 AA 기준. Contrast ratio 4.5:1 이상. 도대체 이게 뭔 소리야. 플러그인을 깔았다. "Stark - Accessibility Checker". 빨간불이 떴다. 명도 대비가 부족하단다. 색상을 다시 조정했다. L 값을 55%로 낮췄다. 이번엔 통과했다. 2시간이 걸렸다. 색상 하나 정하는 데. 아직 Secondary, Error, Warning, Success 색상이 남았다. 저녁 7시다. 배고프다. 근데 일단 끝내고 먹어야 할 것 같다. 아이콘은 어디서 아이콘이 필요하다. 무료 아이콘 사이트를 뒤졌다. Heroicons, Feather Icons, Material Symbols. 다 괜찮다. 근데 통일성이 없다. 어떤 건 라인 스타일, 어떤 건 Solid. 섞으면 이상하다. 직접 만들기로 했다. Figma에서 벡터 도구를 켰다. 사각형 그리고, 원 그리고, 패스 조정하고. 30분 만에 하나 완성했다. 근데 60개가 필요하다. 계산했다. 30분 × 60개 = 1800분 = 30시간. 미쳤다. 결국 타협했다. 기본 아이콘은 라이브러리 쓰고, 커스텀 필요한 것만 만든다. 그래도 15개는 직접 그렸다. 주말 오후가 다 갔다. 친구가 놀자고 연락 왔다. "바빠. 아이콘 그리는 중." "개발자가 왜 아이콘을?" 나도 모르겠다.Typography는 또 뭐야 폰트를 정해야 한다. 본고딕? 나눔스퀘어? Pretendard? Spoqa Han Sans? 각각 테스트해봤다. 다 비슷해 보인다. 근데 미묘하게 다르다. 행간은 얼마? 자간은? Font-weight는 몇 종류 쓸 건데? "글씨가 좀 답답해 보여요." 기획자 피드백이다. 답답하다는 게 뭔 뜻이지. 행간을 1.5에서 1.6으로 올렸다. "오, 좋네요!" 0.1 차이로 답답함이 해소된단다. Heading은 5단계로 나눴다. H1부터 H5까지. 각각 크기를 정하고, weight를 정하고, line-height를 정했다. 반응형도 고려해야 한다. 모바일에서는 H1이 너무 크다. 미디어쿼리를 추가했다. 결국 만들었다. Typography Scale. 근데 쓰는 건 H1, H2, Body 세 개뿐이다. 왜 만들었지. 레이아웃 그리드 "디자인에 그리드를 깔아주세요." 무슨 말인지 알아듣는 데 3초 걸렸다. 그리드. 12컬럼? 16컬럼? Gutter는 몇 픽셀? Material Design 가이드를 참고했다. 12컬럼, 24px gutter. Figma에서 Layout Grid를 설정했다. 빨간 선이 쫙 그어졌다. 이제 컴포넌트를 그리드에 맞춰 배치한다. 정렬이 딱딱 맞으니 괜찮아 보인다. 근데 개발할 때 이거 다 맞춰야 하나. CSS Grid로 구현했다. grid-template-columns: repeat(12, 1fr). 간단하다. 근데 디자인대로 정확히 맞추려면 padding, margin 계산이 빡세다. 밤 11시에 완성했다. 그리드 시스템. 쓸모는 있는 건가. 모르겠다. 이제 개발한다 디자인이 끝났다. 2주 걸렸다. 원래 개발에 쓸 시간이었다. 이제 코드를 짠다. React 컴포넌트로 만든다. Button 컴포넌트. 디자인 시스템대로 구현한다. variant, size, disabled props. Input 컴포넌트. label, error, helperText 다 넣었다. Card, Modal, Dropdown. 하나씩 만들어간다. Storybook도 세팅했다. 컴포넌트 문서화까지. 혼자 만들고 혼자 본다. 코드리뷰 해줄 사람이 없으니까. 3주 차다. 드디어 실제 기능 개발에 들어간다. 로그인 페이지를 만들었다. 디자인한 컴포넌트를 조합했다. 예쁘다. 내가 디자인한 게 화면에 나오니 뿌듯하다. 근데 이거 하나 만드는 데 왜 5주가 걸렸나. 디자이너 구인 공고 "디자이너 뽑을까요?" 대표님한테 조심스럽게 물었다. "아직은 어렵죠. 예산이..." 알고 있었다. "OOO님이 잘해주시잖아요." 나를 칭찬하는 건지 부담 주는 건지 모르겠다. 구인공고는 올렸다. 6개월째 연락이 없다. 스타트업이라 그렇다. 연봉도 낮고 스톡옵션도 의미 없고. 결국 나만 있다. 개발자 겸 디자이너. 이력서에는 뭐라고 쓰지. "UI/UX 가능한 풀스택 개발자"? 웃긴다. 풀스택의 의미 풀스택이 뭔가 했다. 프론트엔드, 백엔드. 그 정도인 줄 알았다. 여기는 다르다. DevOps도 한다. AWS 세팅, Docker 배포, CI/CD 파이프라인. 기획도 돕는다. 요구사항 정리, 유저 플로우 그리기. 이제 디자인도 한다. UI 설계, 컴포넌트 제작, 디자인 시스템. 심지어 CS도 본다. 유저 문의 오면 내가 답한다. 진짜 풀스택이다. Full Stack이 아니라 Full Everything. 월급은 개발자 하나 치인데 일은 다섯 몫이다. 효율적이긴 하다. 소통 비용이 없으니까. 나랑 나랑 얘기하면 되니까. 근데 지친다. 하나에 집중을 못한다. 오늘은 디자인하다가 내일은 백엔드 API 짜다가 모레는 인프라 이슈 해결. 전문성은 어디로 갔나. 이직 고민 이력서를 업데이트했다. "React, Node.js, PostgreSQL, AWS, Docker... 그리고 Figma." Figma를 넣을지 고민했다. 근데 뺄 수가 없다. 실제로 했으니까. 대기업 공고를 봤다. "프론트엔드 개발자", "백엔드 개발자". 분리돼 있다. 디자인은 디자이너가 한다. 당연하다. 여기는 특이한 거다. 면접 가면 뭐라고 설명하지. "디자인 시스템 구축 경험이 있습니다"? 좋게 들릴까. 아니면 "왜 개발자가 그걸?"이라고 할까. 3년 차 개발자. 근데 제대로 된 개발 경험은 얼마나 되나. 기술 부채를 해결할 시간도 없었다. 테스트 코드도 못 짰다. 디자인하느라. 내일도 Figma 내일 할 일을 정리했다.회원가입 플로우 UI 수정 대시보드 차트 컴포넌트 디자인 API 에러 핸들링 개선 프로덕션 배포1번, 2번이 디자인이다. 3번, 4번이 개발이다. 반반이다. 요즘 평균이 이렇다. Figma는 익숙해졌다. 단축키도 외웠다. Auto Layout도 쓴다. 근데 좋아하지는 않는다. 코드가 더 편하다. 로직이 더 재밌다. 그래도 해야 한다. 나밖에 없으니까. "정말 풀스택이 됐다"는 말이 맞다. 원하던 풀스택은 아니지만.Figma 탭을 10개 열고, VS Code 탭도 10개 열고, 그렇게 일한다.