플랫폼 디자이너가 효율을 만들어내는 법
황희영 토스 · 토스 기술 블로그
AI 핵심 요약
스케치에서 프레이머로 플로우차트를 옮기면서 기존 화살표 옵션을 그대로 복제하면 선택지가 늘고 사용도 복잡해지는 문제가 있었다. 이를 해결하기 위해 화살표의 공통 기초 형태를 찾아 4가지 타입으로 정의하고, 회전·반전·색상·레이블 등의 옵션을 조합하는 곱하기 방식의 컴포넌트를 코드로 만들었다. 텍스트가 도형과 함께 회전하거나 반전되는 문제는 변형 규칙과 레이블 위치 규칙을 세워 해결했으며, 둥근 모서리와 자연스러운 선 연결부를 다듬어 심미성도 챙겼다. 그 결과 디자이너뿐 아니라 프레이머에 익숙하지 않은 PO도 복잡한 제품의 화면 흐름을 표현하는 데 활용할 수 있었다.
- 기존 툴의 사용 방식을 새 툴에 그대로 옮기기보다, 새 툴의 구조와 기능에 맞춰 작업 방식을 다시 설계하세요.
- 옵션을 개별 항목으로 계속 추가하기보다, 공통 형태와 변형 규칙을 찾아 조합 가능한 축으로 나누면 확장하기 쉽습니다.
- 도형을 회전·반전할 때 텍스트까지 함께 변형되지 않도록 분리하고, 레이블 위치를 정하는 규칙을 마련해야 합니다.
- 코드로 컴포넌트를 구현할 때는 기능뿐 아니라 모서리와 선의 연결부 같은 시각적 완성도도 함께 다듬으세요.
소개
수많은 가짓수들을 단순히 더하기로 추가하는 것이 아니라 곱하기로 확장하면서 극단적인 효율과 심미성까지 챙겼던 과정들을 플로우차트 제작 프로젝트를 예시로 소개해드릴게요.
비슷한 학습 자료
문서 정세희
문제의 근원을 해결 하기 위한 다양한 시도
문서 박수현
토스 디자이너가 제품에만 집중할 수 있는 방법
문서 이정현
이런 것도 컴포넌트로 만들어도 될까?
문서 오지은
잘 만든 시스템 하나로 미친 효율 얻는 방법
책 라이언 왓킨스 예스24
유니티 게임 개발을 위한 절차적 콘텐트 생성
책 성구(강성규) 예스24
요즘 일잘러를 위한 클로드 콘텐츠 자동화 with 코워크, 디자인, 코드
책 성구(강성규) 예스24
자료 조사, 글쓰기, 디자인을 하나로 묶어 스스로 굴러가게 만드는 1인 자동화 시스템 구축 가이드! AI로 무엇이든 뚝딱 만들어내면서도 막상 매주 같은 작업을 반복하고 있지 않나요? 만약 그렇다면 아직 AI를 제대로 활용하지 못하고 있는 것입니다. 이 책은 단순한 도구 사용법이 아닌, 한 번 구축해 두면 알아서 작동하는 ‘나만의 콘텐츠 자동화 시스템’을 만드는 방법을 안내합니다. 코딩을 몰라도, 복잡한 명령어를 억지로 외우지 않아도 괜찮습니다. 클로드의 뛰어난 텍스트 분석력과 협업 기능(코워크, 디자인, 코드, 스킬, 커넥터 등)을 활용해 자료 조사부터 SNS 콘텐츠, 뉴스레터, 카드뉴스, PPT 제작까지 실무에 필요한 핵심 과정을 한 단계씩 자동화합니다. 나아가 이 모든 개별 작업을 하나의 통합 시스템과 대시보드로 엮어 진정한 ‘1인 자동화 시스템’을 완성합니다.
인공지능 기타