메인으로 이동

| 플랜아이 디자이너들이 아이디어를 구체화하는 단계부터 화면을 완성하는 단계까지, 실제로 어떤 도구를 어떻게 쓰는지 정리했습니다.

디자이너의 책상 위에는 늘 도구가 많습니다. 예전에는 포토샵, 일러스트레이터, Figma 정도였다면 이제는 조금 복잡해졌습니다.

챗GPT에 물어보고, Midjourney에 이미지를 부탁하고, Framer로 움직여보고, Responsively로 여기저기 확인합니다. 그래서 궁금해졌습니다. 플랜아이 DX사업부 디자이너는 대체 이 많은 도구를 언제, 어떻게 꺼내 쓰고 있을까요?

Step 1. 막막하면 일단 물어봅니다

프로젝트 초반은 늘 어렵습니다. 요구사항은 많고, 자료는 흩어져 있고, 어디서부터 시작해야 할지는 애매합니다. 이럴 때 챗GPT 같은 생성형 AI에게 말을 걸어봅니다.

"이 서비스 구조 좀 정리해줘."
"사용자 플로우에서 놓친 게 있을까?"
"이 카피, 조금 더 좋아질 수 있을까?"

AI와 대화하며 생각의 실마리를 얻습니다.

아이디어가 구체화되면 Google Stitch, Claude Design, Arena AI로 화면의 방향을 빠르게 그려보고, 괜찮은 레퍼런스는 아카이브해둡니다. 말 그대로 빈 화면과 친해지는 시간입니다.

Step 2. 이제 Figma로 들어갑니다

기획이 정리되면 본격적으로 화면을 만듭니다. 이때 가장 바빠지는 도구가 Figma입니다.

Figma에서 UI를 그립니다. AI 에이전트를 활용해 디자인 시스템을 구축하고, 반복되는 작업을 자동화합니다. 수작업 대비 시간이 60% 이상 줄었습니다. 또한 수많은 Figma 플러그인을 적극적으로 활용해 작업 효율을 높이고, 필요한 기능이 없을 경우에는 직접 만들어 사용하기도 합니다. 자주 쓰는 폰트를 상단에 고정하는 플러그인, 원하는 스타일의 아이콘을 계속 생성해주는 플러그인처럼요.

"예쁘게 그리는 것"보다 덜 반복하고 더 많이 생각하는 것에 가까워지고 있습니다.

비주얼이 필요하면 Midjourney, Firefly, Runway, ChatGPT, Grok, Gemini Omni 같은 생성형 AI를 꺼냅니다. 그렇게 만든 이미지는 Photoshop, Illustrator, Premiere Pro로 다시 다듬습니다. AI가 만들어준 결과물도 결국 디자이너의 손을 한 번 더 거쳐야 하니까요.

[사진 설명] 최근 사용한 피그마 플러그인 및 자동화 사례

Step 3. 화면이 움직이기 시작하면

디자인은 멈춰 있을 때보다 움직일 때 훨씬 많은 이야기를 합니다.

Figma와 Figma Sites로 화면의 흐름을 확인하고, 정지된 화면만으로 설명하기 어려울 때는 Framer로 실제처럼 움직이는 프로토타입을 만들어 완성된 서비스를 미리 경험해볼 수 있도록 합니다.

[사진 설명] Framer로 구현한 인터랙션 프로토타입 사례

SVGator와 Lottie를 활용해 화면에 세밀한 모션을 더하기도 합니다. 최근에는 Figma 안에서 모션을 직접 만들고 적용하는 방식으로 작업 범위를 넓혀가며, 하나의 환경에서 디자인부터 모션까지 자연스럽게 연결하려는 시도도 이어지고 있습니다.

버튼 하나가 어떻게 움직이는지, 화면 전환이 얼마나 자연스러운지. 가끔은 그 몇 초를 위해 한참을 고민합니다. 하지만 그런 몇 초가 사용자 경험을 바꾸기도 하니까요.

Step 4. 마지막은 '의심'입니다

디자인이 끝나면 끝난 걸까요? 아직 아닙니다.

"모바일에서는?"
"텍스트가 두 줄이면?"
"이 상태에서는 깨지지 않을까?"

Gemini와 ChatGPT로 예외 케이스를 찾아보고, 각 기기별 해상도에 맞춰 한 번에 화면을 보여주는 Responsively App으로 여러 디바이스에서 디자인이 의도대로 보이는지 확인합니다.

그래도 마지막은 사람이 봅니다. 1px의 오차, 어색한 간격 하나까지.

[사진 설명] Responsively App으로 확인한 최근 작업물, SIW 홈페이지

좋은 도구보다, 좋은 타이밍

플랜아이 DX 디자인그룹의 도구함에는 꽤 많은 것들이 들어 있습니다. AI도 있고, Figma도 있고, 이미지·영상 도구도 있고, 프로토타이핑과 검수 도구도 있습니다.

하지만 도구의 개수보다 중요한 것은 막막할 때 무엇을 꺼낼지, 어디까지 맡기고 어디부터 직접 할지를 아는 것이라고 생각합니다.

도구는 점점 똑똑해지고 있습니다. 그럴수록 디자이너에게 필요한 건 더 좋은 클릭이 아니라, 더 좋은 판단인지도 모르겠습니다.

오늘도 우리는 도구함을 엽니다. 이번 프로젝트에는 어떤 걸 꺼내볼까요?

플랜아이 DX사업부가 어떤 일을 하는지 궁금하시다면 디지털 전환(DX) 이야기를 확인해 보세요.

글 · 김주현 (DX사업부 디자인그룹 디자인2팀 팀장)
편집 · 김현정 (IR팀 매니저)