toss2026년 6월 19일

디자이너에게 AI로 뭐든 만들어보라고 한다면 (새 탭에서 열림)

토스 디자인 챕터의 AI Contest는 AI로 무엇이든 만들어보는 한 달간의 실험으로, 총 122개의 결과물이 모였습니다. 사례를 보면 AI는 완전히 새로운 업무보다 반복 작업 자동화, 지식 공유, 인터랙션 설계, 짧은 시간 안의 품질 향상에 특히 효과적이었습니다. 핵심은 AI를 직접 활용해 자신의 문제를 빠르게 실험하고 해결하는 데 있습니다. ## 반복 업무를 자동화하다 - 이미지를 입력하면 UI에 적합한 색상을 자동으로 추출하고 보정하는 로직을 개발했습니다. - 사진마다 색상 결과가 달라 수년간 해결하지 못했던 문제를 AI와 함께 코드 초안으로 만들었습니다. - 샘플 이미지를 반복해서 입력하고 결과를 검증·수정하며 로직을 개선했습니다. - 완성된 로직은 실제 토스 쇼핑 상품 카드의 색상에 적용됐습니다. ## 개인 지식으로 협업 비용을 줄이다 - 과거 슬랙 대화와 정리된 참고 자료를 학습한 메신저 봇을 만들었습니다. - 팀원의 디자인·요건 질문에 대해 과거 논의를 근거로 답변 초안을 생성합니다. - 담당자는 초안을 그대로 보내거나 수정해 전달할 수 있습니다. - 사람이 수정한 답변 방향도 다시 반영해 유사한 질문에 더 정확히 답하도록 개선됩니다. - 반복적인 질문 대응 시간이 줄어들면서 “내가 1.5명으로 늘어난 느낌”이라는 효과를 얻었고, 다른 디자이너들도 각자의 봇을 만들기 시작했습니다. ## 말보다 동작하는 프로토타입으로 설득하다 - 주식 거래용 증권 PC 화면을 정적인 시안이 아닌 실제로 조작 가능한 프로토타입으로 구현했습니다. - 패널을 끌어 위치를 바꾸거나 창 크기를 조절하면 화면이 반응하도록 제품 코드를 직접 활용했습니다. - 말이나 영상으로 설명해야 했던 인터랙션을 직접 움직여 보여주면서 디자인 의도가 개발 과정에서 흐려지는 문제를 줄였습니다. - 개발자와 PO가 결과를 즉시 이해할 수 있어 커뮤니케이션과 설득력이 높아졌습니다. ## 제한된 시간에 완성도를 높이다 - 토스뱅크 공채 웹페이지의 직군별 키비주얼에 사용할 모션그래픽을 AI로 제작했습니다. - 모션의 기본 이미지와 시작·끝 프레임은 사람이 직접 만들고, 중간 결과 생성은 Kling을 활용했습니다. - 원하는 결과가 나올 때까지 프롬프트를 반복적으로 수정했습니다. - 촉박한 일정 속에서도 직군별 모션을 단 하루 만에 완성했습니다. ## AI 활용을 시작하는 네 가지 방향 - **효율:** 매일 반복하는 일 중 가장 번거로운 작업 하나를 자동화합니다. - **분신:** 반복해서 답하는 질문을 대신 처리할 개인 지식 봇을 만듭니다. - **설득:** 말로 설명하던 디자인을 직접 작동하는 프로토타입으로 보여줍니다. - **퀄리티:** 짧은 시간 안에 더 높은 완성도에 도달할 수 있도록 AI를 제작 과정에 활용합니다. AI를 도입할 때는 거창한 신규 프로젝트보다 현재 업무에서 반복되거나 설명하기 어렵고 시간이 부족한 문제 하나를 골라 작게 실험하는 것이 효과적입니다.

motion-graphicsaiprototypingslack+3

figma2018년 5월 30일

Figma 엔지니 (새 탭에서 열림)

Kathryn Salant의 음악, 프로그래밍, 사이클로크로스 경험은 모두 창의적 문제를 반복적으로 개선하고, 사람들과 함께 결과를 만들어가는 태도로 연결된다. 그녀는 기술적 완성도만 좇기보다 의미와 협업을 중시하며, 디자이너의 아이디어를 실현하는 엔지니어가 되고자 했다. Figma는 이처럼 다양한 배경과 강점을 지닌 구성원들의 이야기를 통해 조직의 인간적인 면모와 협업 문화를 보여준다. ## Figma의 “3 things” 전통 - 새로 합류한 구성원이 자신을 만든 세 가지 경험이나 대상을 전사 미팅에서 소개하는 문화다. - 가족, 특정 사건, 취미 등 주제에는 제한이 없다. - Figma는 이를 통해 구성원들의 다양한 배경과 개성을 공유하고, 회사 밖에도 팀원들의 인간적인 모습을 소개한다. - Kathryn의 세 가지는 **음악, 프로그래밍, 사이클링**이며, 모두 점진적인 발전과 측정 가능한 성취라는 공통점을 가진다. ## 음악: 기술적 완벽함을 넘어 창의성과 의미로 - Kathryn은 5학년 때 트럼펫을 시작했고, 대학에서 음악을 전공하며 장학금과 런던 유학 경험을 쌓았다. - 클래식 음악계에서 일부 연주자들이 기술적 정확성에만 집중하고 음악의 영감과 의미에는 덜 관심을 보이는 모습에 실망했다. - 이후 샌프란시스코에서 전위적인 오케스트라 밴드 **Extra Action Marching Band**에 합류했다. - David Byrne의 투어에 참여하고, 비욘세의 **“Crazy in Love”**를 연주하는 등 전통적인 클래식 음악과는 다른 실험적 활동을 했다. - 음악을 통해 정해진 형식보다 창의적 표현과 실험을 중시하는 태도를 발전시켰다. ## 프로그래밍: 기술을 창작의 도구로 활용하기 - 6학년 때 Apple IIe 컴퓨터와 Logo를 접하면서 프로그래밍을 배웠고, 실제 게임처럼 보이는 슈퍼 마리오 데모를 만들었다. - 컴퓨터 구조를 직접 확인하다가 어머니의 업무용 컴퓨터를 고장 내거나 시스템 파일을 삭제하는 등 시행착오를 거쳤다. - 대학 시절 Flash 4를 접하며 인터넷에서 모션 그래픽과 상호작용을 구현할 수 있다는 점에 매료됐다. - Flash가 음악가, 예술가, 디자이너 등 창의적인 사람들을 끌어들인다는 점에서 기술과 디자인의 결합 가능성을 발견했다. - 자신이 직접 창작하는 것뿐 아니라, 다른 사람들이 아이디어를 실현하도록 돕는 코드를 작성하고 싶다는 목표를 갖게 됐다. - 디자이너의 의도를 존중하고 세밀하게 구현했으며, 팀 간의 열린 소통을 중요하게 여겼다. - 이러한 태도는 디자인과 개발의 협업을 중시하는 Figma의 사명과 맞닿아 있다. ## 사이클링과 사이클로크로스: 경쟁보다 공동체와 과정 - 어린 시절에는 운동을 잘하는 편이 아니었지만, 샌프란시스코에서 AIDS/LifeCycle 7일간의 장거리 라이딩에 참여하며 사이클링을 시작했다. - 자신의 체력과 지구력을 시험하고 한계를 확장하는 과정에서 큰 성취감을 느꼈다. - 2006년에는 자전거 커뮤니티를 만들기 위해 매주 샌프란시스코를 달리는 **Butterlap**을 창립했다. - Butterlap의 규칙은 “무례하게 굴지 말 것”과 “술을 가져오면 좋은 술을 가져올 것”으로, 진지함보다 친밀감과 즐거움을 강조했다. - 이후 진흙길을 달리는 커뮤니티 중심의 **사이클로크로스**에 참여했다. - 세계 선수권 대회에 참가했지만 직접 경쟁하기보다 다른 참가자들을 응원하는 데 더 많은 시간을 보냈다. - Kathryn에게 사이클로크로스는 승패보다 함께하는 사람들, 경험, 과정 자체를 즐기는 활동이다. ## 서로 다른 경험을 관통하는 강점 - 음악, 프로그래밍, 사이클링 모두 반복과 개선을 통해 결과를 발전시킨다는 공통점이 있다. - 잘되지 않는 연주나 코드도 원인을 찾고 수정하면 나아질 수 있다는 문제 해결 관점이 드러난다. - 개인의 기술적 성취보다 창의성, 협업, 공동체 의식을 중요하게 여긴다. - Figma는 Kathryn의 사례를 통해 좋은 엔지니어가 단순히 코드를 작성하는 사람이 아니라, 다양한 분야의 감각을 연결해 다른 사람의 창작을 돕는 사람임을 보여준다. 다양한 취미와 경력은 서로 무관해 보이더라도 문제 해결 방식과 협업 태도라는 공통된 강점으로 연결될 수 있다. 개인과 조직 모두 기술적 전문성뿐 아니라 창의성, 소통, 공동체 의식을 함께 키우는 것이 중요하다.

motion-graphicscollaborative-designdesign-toolsprogramming+3

figma2018년 4월 17일

디자인 면접에서 포트폴 (새 탭에서 열림)

신입 디자이너의 포트폴리오 면접 발표는 작품의 완성도만큼이나 전달 방식이 중요하다. 발표자는 자신이 어떤 디자이너인지 명확히 소개하고, 가장 애정을 가진 프로젝트를 중심으로 문제·역할·해결 과정·성과를 간결하게 설명해야 한다. 또한 면접 회사의 브랜드를 무리하게 차용하기보다 자신의 역량과 디자인 사고를 정확히 보여주는 데 집중해야 한다. ## 발표의 시작은 천천히, 정체성은 분명하게 - 발표 초반에는 이름과 전문 분야를 먼저 소개한다. - 모든 디자인 분야를 잘한다고 포장하기보다 자신이 강점을 가진 영역을 명확히 말한다. - 타이포그래피 - UX/UI 디자인 - 커뮤니케이션 디자인 - 모션 그래픽 - 프런트엔드 개발 - 경험해 본 분야와 전문 분야를 구분해 설명하면 자신의 역량 범위를 더 신뢰감 있게 전달할 수 있다. - 경력이 많은 디자이너라면 여러 분야에 걸친 폭넓은 전문성을 강조해도 좋지만, 신입이라면 핵심 강점과 열정을 선명하게 보여주는 편이 효과적이다. ## 가장 오래 한 프로젝트보다 가장 좋아하는 프로젝트를 먼저 보여주기 - 신입 지원자는 규모가 크고 작업 시간이 긴 프로젝트를 먼저 제시하려는 경향이 있다. - 그러나 발표 초반에는 자신이 가장 즐겁게 작업했고 애정을 가진 프로젝트를 선택하는 것이 좋다. - 열정이 담긴 프로젝트는 발표자의 디자인 감각과 개성을 더 자연스럽게 드러낸다. - 작은 프로젝트라도 본인의 관점과 성향을 잘 보여준다면 복잡하고 장황한 프로젝트보다 인상적일 수 있다. ## 프로젝트는 “무엇을, 누가, 왜, 현재 어떻게 되었는가”로 설명하기 면접관에게 프로젝트의 모든 세부 과정을 전달하려 하기보다, 핵심 흐름만 남겨 이해하기 쉽게 구성해야 한다. - 간단한 프로젝트 소개 - 해결해야 했던 문제 - 프로젝트 목표 - 실제 실행 과정 - 최종 디자인 - 결과와 성공을 판단한 기준 ### 무엇을 만든 프로젝트인가 - 발표 자료에 긴 아티스트 스테이트먼트가 있더라도 면접관이 모두 읽는다고 기대하지 않는다. - 배경지식이 없는 사람도 이해할 수 있도록 프로젝트의 성격과 목적을 간단히 설명한다. ### 누가 어떤 역할을 맡았는가 - 팀 프로젝트에서는 자신의 기여 범위를 반드시 분명히 한다. - 담당한 업무와 의사결정에 참여한 부분을 설명해야 면접관이 실제 역량을 정확히 판단할 수 있다. - 역할을 밝히지 않으면 팀의 성과를 자신의 성과처럼 말하는 것으로 오해받거나, 반대로 본인의 기여가 제대로 드러나지 않을 수 있다. ### 왜 필요한 프로젝트였는가 - 대부분의 디자인 과제는 특정한 문제를 해결하기 위해 진행된다. - 사용자의 문제, 비즈니스 요구, 커뮤니케이션상의 제약 등 프로젝트가 시작된 이유를 구체적으로 제시한다. - 면접관이 디자인 과제의 맥락과 난점을 공감할 수 있도록 상황을 생생하게 설명한다. ### 현재 어떤 결과를 만들었는가 - 디자인이 실제로 어떻게 사용되었는지 설명한다. - 가입자 증가, 전환율, 사용량 등 측정 가능한 성과가 있다면 수치로 제시한다. - 결과물이 실제 채택되지 않았더라도, 채택되었다면 어떤 효과가 있었을지와 향후 가능성을 설명할 수 있다. - 기업은 마감 시점의 결과물뿐 아니라 디자인이 실제 환경에서 어떻게 살아갈 수 있는지도 보고 싶어 한다. ## 면접 회사의 브랜드를 과도하게 활용하지 않기 - 지원 회사의 브랜드를 발표 자료나 작품에 무리하게 적용하는 것은 신중해야 한다. - 회사의 브랜드 사용 지침을 정확히 모르면 의도치 않게 브랜드를 잘못 표현할 수 있다. - 면접관 중에는 해당 브랜드의 디자인 시스템과 컴포넌트를 직접 만든 디자이너가 있을 수 있다. - 회사를 만족시키려는 의도가 오히려 브랜드를 피상적으로 모방하거나 잘못 이해한 결과로 보일 수 있다. - 회사에 맞춘 준비보다 자신의 디자인 역량, 문제 해결 과정, 협업 기여도를 명확히 전달하는 데 집중하는 것이 안전하다. 발표를 준비할 때는 프로젝트 수를 늘리기보다 자신을 가장 잘 보여주는 작업을 선정하고, 각 프로젝트를 짧고 일관된 구조로 연습하는 것이 좋다. 특히 “내 역할은 무엇이었는가”, “어떤 문제를 해결했는가”, “그 결과 무엇이 달라졌는가”를 명확히 답할 수 있어야 한다.

motion-graphicsfigmacsshtml+3

figma2017년 3월 19일

디자이너가 코 (새 탭에서 열림)

알렉스 코넬은 디자이너가 반드시 코딩을 배워야 한다는 통념에 의문을 제기한다. 그는 코딩 대신 영화 제작과 모션 그래픽을 선택했고, 그 전문성이 훗날 Facebook Live의 디자인과 제품 개발에 중요한 자산이 되었다. 결론적으로 코딩 학습은 개인의 흥미와 팀의 필요에 따라 결정해야 하며, 글쓰기와 커뮤니케이션 능력 역시 디자인 영향력을 키우는 핵심 역량이다. ## 코딩을 선택하지 않은 이유 - 코넬이 진로를 결정한 2007년에는 “디자이너가 코딩을 배워야 하는가”가 지금처럼 널리 논쟁되는 주제가 아니었다. - 당시 스타트업에는 이미 코딩을 깊이 아는 엔지니어들이 있었기 때문에, 자신까지 코딩을 배우는 것보다 팀에 없는 역량을 갖추는 편이 유용하다고 판단했다. - 그는 영화 제작, After Effects, Premiere 등 영상과 모션 그래픽 기술을 선택했다. - 프로토타이핑 도구가 부족했던 시절, After Effects를 활용해 얼굴 애니메이션과 인터랙션을 시각적으로 표현했다. - 궁극적으로 코딩보다 모션 그래픽이 더 흥미롭게 느껴졌다는 개인적 동기도 컸다. ## 전문성의 차별화가 만든 기회 - 코넬은 영화와 사진 분야의 역량 덕분에 Facebook에 영입되어 Live 기능 출시를 돕게 되었다. - 특정 직무의 표준 경로를 따르지 않고 팀에 부족한 능력을 개발한 것이 장기적으로 차별화된 경쟁력이 되었다. - 코딩을 직접 하지 않더라도 기술적 배경을 이해하면 엔지니어와 원활히 협업하고, 디자인을 구현 가능한 형태로 설명할 수 있다. ## 코딩 학습은 정답이 아닌 개인의 선택 - 코딩을 배울지 확신이 없다면, 코넬은 우선 “아니오”에 가깝게 답한다. - “영화 편집을 배워야 할까?”라는 질문처럼, 실제로 해당 분야에 흥미가 있는지가 판단의 출발점이 되어야 한다. - 코딩이 유용하다는 이유만으로 모든 디자이너에게 동일한 학습 경로를 강요할 수는 없다. - 디자인과 코딩의 경계는 Framer, Origami 같은 도구와 로직 기반 프로토타이핑의 등장으로 점점 흐려지고 있다. - 따라서 코딩을 할 줄 아는 디자이너와 그렇지 않은 디자이너라는 이분법보다, 자신에게 적합한 도구와 전문성을 선택하는 것이 중요하다. ## 글쓰기와 커뮤니케이션의 중요성 - 코딩 외에 특히 추천하는 역량은 글쓰기와 아이디어를 설명하고 설득하는 능력이다. - 훌륭한 디자인이나 애니메이션도 다른 사람을 납득시키고 관심을 끌지 못하면 실제 제품이나 의사결정으로 이어지기 어렵다. - 커뮤니케이션은 공식적인 발표뿐 아니라 회의, 영상, 강연, 프레젠테이션 등 다양한 방식으로 이루어진다. - 아이디어를 명확하게 전달하고 사람들을 움직이는 능력은 프로젝트의 방향 자체를 바꿀 수 있다. - 학교 교육은 글쓰기와 감성 지능, 대인 커뮤니케이션을 연습할 기회를 제공하므로 이런 역량을 충분히 익히기 전에 너무 일찍 학업을 중단하지 말 것을 권한다. 자신이 코딩에 흥미가 있고 제품 구현을 직접 다루고 싶다면 코딩을 배우는 것이 좋다. 그러나 모든 디자이너가 같은 길을 갈 필요는 없으며, 팀에 필요한 역량과 자신의 관심사를 기준으로 영상, 글쓰기, 발표, 리서치 등 차별화된 전문성을 개발하는 편이 더 실용적이다.

motion-graphicsprototypingui-ux-designframer+3

figma2016년 8월 22일

Figma와 Framer 통합 기능 소개 (새 탭에서 열림)

Figma는 2016년 Framer와의 통합을 발표하며, 정적 UI 디자인과 코드 기반 프로토타이핑 사이의 작업 흐름을 단순화했다. 이제 사용자는 Figma의 디자인 자산을 레이어별로 내보내고 다시 업로드하지 않고도 Framer로 한 번에 가져올 수 있다. 이를 통해 디자인 아이디어를 빠르게 코드로 구현하고, 실제 상호작용을 테스트하며, 더 나은 제품을 빠르게 출시할 수 있다는 것이 글의 결론이다. ## 정적 목업만으로는 부족한 이유 - 모바일과 다양한 디바이스 환경에서는 단순한 화면 이미지나 정적 목업만으로 사용자 경험을 충분히 표현하기 어렵다. - 디자이너에게는 다음 세 가지 능력이 필요하다. - 실제 사용될 맥락에 맞춰 디자인하기 - 사용자의 입력에 따라 화면이 어떻게 변하는지 보여주기 - 모션 그래픽과 전환 효과를 통해 상호작용의 즐거움을 표현하기 - 과거에는 After Effects 같은 영상 편집 도구를 사용하거나 HTML, JavaScript, CSS로 프로토타입을 직접 작성해야 했다. - 이러한 방식은 FTP 업로드, 모바일 기기에서 3G로 접속하기, 브라우저 호환성 문제 해결 등 창의적인 작업과 무관한 부담이 컸다. ## Figma와 Framer의 역할 - Figma는 UI를 빠르게 설계하고 반복해서 수정하는 데 강점을 가진다. - Framer는 코드를 기반으로 복잡하고 개방적인 상호작용을 구현하는 프로토타이핑 도구다. - 특히 복잡한 단일 페이지 인터랙션을 표현하는 데 적합하며, 디자이너가 코드 수준의 프로토타입을 만들 수 있도록 돕는다. - 두 도구를 함께 사용하면 Figma에서 만든 UI 아이디어를 Framer에서 빠르게 구현하고 실제 동작을 검증할 수 있다. ## 한 번의 클릭으로 디자인 자산 가져오기 - 통합 이전에는 Figma의 레이어를 하나씩 내보낸 뒤 Framer에 다시 업로드해야 했다. - 새 통합 기능을 사용하면 Framer 작업 중 Figma 자산을 한 번에 가져올 수 있다. - 반복적인 파일 변환과 업로드 과정이 줄어들어 디자인에서 프로토타이핑으로 넘어가는 시간이 단축된다. - 결과적으로 아이디어를 코드로 옮기고 테스트하는 과정이 더 빠르고 효율적으로 바뀐다. ## 디자인과 코드의 연결 - Framer 사용자 Jonathan Simcoe는 Framer의 코드 기반 구조가 표현력이 높고 제한이 적다고 설명했다. - Figma는 팀이 UI를 빠르게 설계하고 반복하는 데 도움을 주며, Framer는 이를 실제 상호작용이 포함된 프로토타입으로 발전시키는 역할을 한다. - 통합의 목표는 디자이너가 아이디어를 더 빨리 구현하고, 테스트와 개선을 반복해 더 나은 제품을 출시하도록 지원하는 것이다. - 이는 디자인 도구와 개발·프로토타이핑 도구를 분리하기보다 하나의 연속된 작업 흐름으로 연결하려는 시도다. ## 출시 당시 상황 - 해당 기능은 2016년 8월 발표됐으며, 당시 Figma는 아직 비공개 릴리스 단계였다. - Figma는 사용자 요청을 바탕으로 여러 프로토타이핑 도구와의 연동을 검토했고, 그중 Framer에 대한 요구가 가장 컸다고 밝혔다. - 사용자는 Figma에서 시각적 설계를 진행한 뒤 Framer에서 코드 기반 상호작용을 구현하는 방식으로 두 도구를 조합할 수 있었다. 실무에서는 Figma를 화면 설계와 반복 작업에 활용하고, 복잡한 인터랙션이나 실제 동작 검증이 필요할 때 Framer로 가져가는 방식이 효과적이다. 특히 레이어를 수동으로 내보내는 과정이 줄어들기 때문에 프로토타입을 자주 수정하고 테스트하는 팀일수록 통합의 이점을 크게 얻을 수 있다.

motion-graphicsfigmaprototypingjavascript+4