by
Mar 05. 2024
스토리보드, 파워포인트에서 피그마로 이사합니다.
더욱 빠르고 효율적인 스토리보드 작업기
(24/7/11에 덧붙인 글)
안녕하세요. UXUI 1팀 입니다.
지난 3월에 플러스엑스 UXUI 1팀 안소은님께서 아래의 스토리보드(상세설계서) 작업 전환기에 대해서 글을 쓴 이후에 업데이트된 소식이 있어 공유합니다!
저희 팀에서 UX 디자이너 분들이 파워포인트에서 피그마로 스토리보드 작업을 전환하고 조금 있으면 2년이 다 되어가는데요. 이 혼란스러웠던 2년의 과정을 고스란히 함께해주신 UX 디자이너 두 분이, 전환기에 겪었던 어려움이나, 실질적인 스토리보드 제작 업무에 도움되는 노하우를 한 땀, 한 땀 담아서 강의를 제작해 주셨고, 지난 월요일에 런칭이 되었습니다.(정말 증말 고생많으셨습니다!!)
(UI디자인 입문자를 위한 피그마 강의도 같이 런칭했어요.)
UX 피그마 강의 바로가기 : Plus X UX 디자이너가 피그마로 설계하는 화면 방식
이 강의가, 기업에서 기획 업무를 피그마로 전환을 고민하고 있는 분들이나 이제 막 UX 디자이너로 실무를 시작하는 분들께 큰 도움이 되기를 바라겠습니다. :)
이 외에도, 플러스엑스의 UX 실무 마스터 강의는 작년 초에 오픈을 했는데요. 저희 플러스엑스 UX 디자이너로 입사하신 분들이 실무 온보딩 용으로도 활용할 만큼 내부에서 유용하게 활용되고 있는 교육 콘텐츠이니, 깊이 있는 실무 이론을 배우고 싶으신 분들이 활용하시면 좋을 듯 합니다!
-
(아래부터 이 글의 본문입니다.)
안녕하세요. 플러스엑스 UXUI 1팀에서 UX 파트로 근무한 지 갓 2년 차가 된 안소은이라고 합니다.
늘 소망하던 꿈의 직장에 긴장 가득히 발을 들이고, 입사 동기들과 수줍게 인사하던 겨울이 엊그제 같은데 벌써 이곳에서 보낸 시간이 1년이 지났다는 사실이 아직도 믿기 어려워요. 낮은 연차임에도 불구하고 업무의 제한 없이 모두에게 많은 기회를 주는 플러스엑스 덕분에 입사 초반부터 프로젝트에 심도 있게 참여할 수 있었고, 유능하고 멋진 팀원들과 다양한 경험을 쌓으며 빠르게 성장할 수 있던 것 같습니다. (플엑 짱)
각설하고, 이 글을 읽고 계신 분들 중 스토리보드를 작성한 경험이 있으신 분 계신가요? 만약 있다면 어떤 툴을 사용하여 작성하셨는지도 궁금해요. 22년도의 요즘 어떤 툴로 작업하세요? 플러스엑스 브런치 글에서는 파워포인트와 키노트를 사용하여 스토리보드 작업을 하는 것으로 소개된 바 있었는데요, 23년도의 플러스엑스는 처음으로 파워포인트가 아닌 피그마(Figma)를 사용하여 스토리보드 작업을 시작한 의미 있는 해이기도 했답니다(!)
앱 또는 웹사이트의 컨설팅/구축 프로젝트에 전적으로 투입되는 UXUI팀에게 스토리보드는 떼려야 뗄 수 없는 꼭 필요한 기획 문서입니다. 스토리보드(Storyboard)란 사용자 인터페이스(UI)의 구조와 플로우, 기능 등 모든 측면의 정보를 상세하게 와이어프레임과 함께 정의한 문서로, 일반적으로 줄여서 SB로 불리며 ‘화면설계서’ 혹은 ‘상세설계서’라는 이름도 가지고 있기에 ‘설계서’라고 불릴 때도 많답니다. 이름이 참 많네요… 이곳에서는 편의상 '설계서'라고 부르도록 할게요.
설계서는 대다수의 경우에 서비스 기획자가 직접 작성하며, 플러스엑스의 경우 UX 업무를 주로 담당하는 UX 디자이너가 작성하게 됩니다. UI 디자이너는 설계서 내 표현된 와이어프레임의 화면 구조를 바탕으로 실제 화면을 디자인하고, 개발자는 설계서 내 정의된 디스크립션을 참고하여 앞단(Front-end)의 UI 화면이 실제로 동작할 수 있도록 설계하고 배치하는 작업을 진행하거나, 앱 또는 웹사이트의 뒷단(Back-end)에서 작용이 필요한 시스템을 구축합니다. 디자이너, 프런트엔드와 백엔드 개발자 등 모든 업무처리자들이 동일한 설계서를 보고도 쉽게 이해하고 각자의 작업을 원활히 진행할 수 있게 하기 위해 기획자들은 설계서를 작성함에 있어 친절한 정보 전달을 위해 최선을 다해 노력해야 한답니다. 간결하고 명확한 용어를 사용하고, 모든 사용 케이스에 따른 화면 정의와 각각에 대한 상세한 기능, 인터렉션과 서비스 정책 등을 상세하게 작성해야 하죠.
실제로 설계서를 처음 작업했던 당시 받았던 조언 (아마도 도움이 되었습니다)프로젝트를 하나의 모험에 비유하게 된다면 설계서는 지도 혹은 이정표와 같은 존재라고 볼 수 있어요. 그만큼 설계서 작업은 실무에서 절대적으로 중요한 작업이랍니다! 회사를 다닐수록 하나의 디자인 회사 내에서 모두가 사용하는 툴을 바꾼 것은 상당히 큰 변화였다는 것을 매번 실감하게 되는데요, 이번 브런치 글 작성을 기회 삼아 UX 업무를 하고 계시는 다양한 연차의 디자이너 분들을 찾아가 상세한 히스토리를 들어보고, 제가 직접 경험하며 느낀 점들을 바탕으로 이야기해 보는 시간을 마련했습니다.
왜 피그마로 이사했나요?
그동안 플러스엑스는 파워포인트를 이용하여 정석대로(?) 설계서 작업을 진행해 왔어요. 그러나 와이어프레임 내 공통적으로 사용된 컴포넌트에 수정사항이 생길 시 모든 PPT 파일의 페이지를 뒤적이며 하나하나 교체를 해야 했던 문제, 페이지의 세로 길이가 정해져 있어 와이어프레임 화면이 길어지면 일일이 구성요소를 잘라 다음 장으로 넘겨 작업해야 하는 불편함, 긴 와이어프레임 화면의 사이에 새로운 섹션 추가가 필요할 경우 그 이후의 섹션들을 다음 장의 화면으로 넘겨 관리해야 했던 번거로움 등 다양한 불편함을 겪고 있었습니다.
오늘은 어느 걸 사용해 볼까?이러한 불편함을 이유로 플러스엑스는 파워포인트를 대체할 수 있는 프로그램을 찾기 위해 다양한 툴 스터디를 거쳐왔어요. 그러던 중 UI 디자이너들이 피그마로 공통 컴포넌트와 디자인 시스템을 만들고 필요한 요소를 가져다 활용하는 방식을 보며 설계서 작업에서도 응용할 수 있겠다는 가능성을 느꼈습니다.
이전부터 피그마로의 설계서 전환에 대한 논의는 자주 이루어졌었지만, 당시의 피그마는 가벼운 웹 설계에는 사용될 수 있으나 무거운 구축 작업에서는 무리가 있을 것이라는 의견이 종종 나왔었는데요. 불과 몇 년 사이에 파워포인트를 대체할 수 있을 정도로 기능이 많아진 오늘날의 피그마가 되어 본격적인 설계서의 툴 전환을 시작할 수 있었습니다! 새로운 툴로 기존의 설계서 작업을 이어 나간다는 것은 상당히 큰 변화였던 만큼, 피그마로의 원활한 설계서 전환을 위해 사전에 몇 가지 원칙을 세워놓고 이를 바탕으로 설계서의 큰 틀부터 잡아나가기 시작했어요.
(1) 기존 설계서의 템플릿에서 너무 벗어나면 안 된다.
(2) 함께 일하는 작업자(디자이너, 개발자 등)가 편해야 한다.
(3) 프로토타입 구현이 바로 가능하도록 와이어프레임 화면을 작업해야 한다.
(4) 재사용할 수 있는 컴포넌트 체계를 만들어야 한다.
기업 고객과 함께 일하는 플러스엑스 특성상, 사용하는 툴을 바꾸게 되더라도 기존의 협업 조직이 일하는 방식에서 크게 벗어나면 안 되겠다는 생각이 확고했어요. 그래서, 자연스럽게 전환해 보자! 는 일념으로 시도한 끝에 안정적인 형태를 가진 지금의 피그마 설계서 문서가 나올 수 있던 것 같습니다. 파워포인트에서 피그마로 이사한 지 어느덧 1년이라는 시간이 지나, 지난 1년 동안 디자이너 분들이 피그마로 설계서를 작업하며 느낀 다양한 장점과 피그마 작업 TIP을 만나볼 수 있었습니다.
(1) 효율적인 실시간 협업
실시간 협업은 사람들에게 피그마의 장점을 물어봤을 때 가장 먼저 언급되는 키워드였습니다. 다들 동의하실 거라 믿습니다…
이전의 요즘 어떤 툴로 작업하세요? 글에서도 소개되었듯 피그마는 웹 기반으로 동작하기 때문에 여러 명과 하나의 파일 안에서 매끄럽게 실시간 협업을 진행할 수 있는데요, 개별 사용자를 선택하면 해당 사용자가 현재 보고 있는 화면을 함께 볼 수 있도록 포커싱 해주는 기능, 슬래시(/) 버튼을 눌러 일시적으로 메시지를 띄울 수 있는 ‘커서 챗(Cursor Chat)’ 기능, 모두가 나의 화면에 주목할 수 있도록 요청하는 ‘Spotlight me’ 기능, 화상 미팅 프로그램을 사용하지 않아도 목소리를 전달할 수 있는 ‘Audio Conversation’ 기능 등 협업에 최적화된 기능들이 유독 많습니다. 공동 작업을 하면 종종 심하게 튕기거나 충돌 오류가 발생하는 기존의 파워포인트가 가지고 있는 문제를 쉽게 해결할 수 있었죠.
웹 기반인 피그마는 프로그램을 설치하지 않아도 링크만 있다면 언제든지 열람과 수정이 가능할 정도로 우수한 접근성을 가지고 있습니다. 이는 기업 고객과의 비대면 회의와 미팅에서 더욱 효과적인 커뮤니케이션 수단이 될 수 있었는데요! 어느 화면을 보고 있는지 다른 참여자들에게도 보이기 때문에 별도로 본인의 화면을 공유할 필요도 없으며, 회의 중에도 즉각적으로 설계서를 수정하고 아이디어를 덧붙이면서 서로의 의견을 더욱 자유롭게 제안할 수 있게 되었답니다.
(2) 항상 최신 버전의 파일
이제 CTRL + S 고통은 안녕…다음으로 많이 언급된 장점으로 피그마는 늘 최신 버전으로 자동 업데이트되기 때문에 별도의 파일 저장이 필요하지 않다는 점이었어요. 최신 버전으로 늘 파일이 유지되는 덕분에, 팀 내부와 외부 모든 경우에서 서로 다른 버전의 설계서를 읽으며 소통을 하다 혼동이 생길 일도 이제 눈 녹듯이 사라졌죠.
차곡차곡 쌓이는 히스토리를 보면서 지나온 세월을 실감하는 편하지만 늘 최신 버전으로 자동 저장된다는 장점은, 이전 버전의 설계서들을 다시 확인하기 어렵다는 단점이 되기도 합니다. 다양한 업무처리자들과 함께 작업을 진행하다 보면 이전 히스토리를 원복해야 하는 경우가 종종 발생하는 만큼, 어느 툴로 작업을 하더라도 설계서의 히스토리는 매우 소중하게 관리되어야 하는데요. 저희는 (피그마에서 버전 관리 기능을 지원하고 있지만 Page 단위 별 버전 관리는 아직 지원하고 있지 않기에) 별도로 히스토리를 수합해 놓을 파일을 생성해 놓은 뒤 하나의 설계서 버전이 작업 완료될 시, 해당 파일에 차곡차곡 모아 이전 버전 설계서에 대한 접근도 여전히 용이하도록 관리하고 있답니다.
파워포인트 설계서 파일(좌)과 피그마 내 설계서 Pages(우)또한 타 설계서로의 접근이 쉬워졌다는 장점은 정말 많은 시간을 아껴줬어요. 기본적으로 설계서는 상세 기능을 기점으로 각 파일을 분기하여 작업하는데요, (ex. 하나의 커머스 앱을 설계할 시, 로그인/홈/카테고리/상품상세/장바구니 등 상세 기능별로 각각 나눠 제작) 타 설계서를 보기 위해서는 공유용 폴더 내에 업로드된 최신 설계서를 다운로드하여야만 확인이 가능했던 기존 파워포인트의 방식과는 다르게, 단순히 클릭을 통해 페이지를 바꿔 확인할 수 있는 정도의 수위로 훨씬 가벼워졌습니다.
마지막으로 파일 관리 얘기가 나온 김에 피그마 팁을 하나 더 드리자면, Teams를 생성한다면 프로젝트마다의 설계서와 디자인 파일 등을 그룹핑하여 폴더의 형태로 피그마 안에서 관리가 가능하답니다! 플러스엑스의 경우 PlusX UXUI팀과 BX팀이 각자의 Teams를 생성하여 전체 파일을 관리하고 있죠. 타 프로젝트 팀의 설계서와 디자인 파일을 참고하면서 저희 프로젝트에 대한 영감을 받기도 해요.✨
(3) 컴포넌트 수정과 관리의 편의
자세히 보아야 예쁘다… 오래 보아야 사랑스럽다… 컴포넌트도 그렇다… 드르륵 탁…피그마의 효율성을 최상으로 올려주는 컴포넌트는 이제 설계서와 떼려야 뗄 수 없는 관계가 되었습니다.
저희는 본격적인 설계서 작업 시작 이전에, 설계서 양식 라이브러리를 먼저 제작해 두고 작업 중에 필요한 설계 장표 템플릿을 가져다 활용하는 방식을 택하고 있어요. 기본적인 틀이 잡혀 있는 덕분에 설계 작업 초반부터 막힘없이 설계서 작업을 이어갈 수 있고, 동시에 하나의 프로젝트 내 설계서들 간 장표의 통일성을 긴밀히 유지할 수 있답니다. 이러한 통일성 덕분에 내부와 외부 모두 설계서를 읽고 이해하는 경험이 더욱 매끄럽고 긍정적으로 다가올 수 있었어요.
설계서 작업의 하위 개념으로 동시에 진행되는 와이어프레임 작업에서도 컴포넌트는 매우 유용하게 사용됩니다. 와이어프레임을 작업할 때 꼭 필요한 요소(ex. 버튼, 헤더, 입력필드, 토글 등)를 우선으로 컴포넌트화 해 놓은 뒤, 작업을 하며 필요한 추가 요소를 베리언트로 덧붙여 사용하면 다른 팀원들도 매번 필요한 요소를 새롭게 만들 필요 없이 이미 작업된 컴포넌트에서 선택해 사용할 수 있습니다. 작업 시간도 단축되고, 설계서 간 화면 요소를 모두 동일하게 가져갈 수 있기에 통일성도 유지되고, UI 디자이너가 UI 컴포넌트를 작업할 때 설계서 내 컴포넌트를 확인하고 얼라인을 맞춰 작업이 가능하기에 효율성, 통일성과 편의성까지 모든 장점을 컴포넌트 하나로 얻어갈 수 있죠.
컴포넌트(베리언트) 생성하기아직 컴포넌트와 베리언트를 생성하고 사용하는 것이 익숙하지 않은 분들이 계실까 하여 실제로 컴포넌트를 어떻게 생성하고 베리언트를 관리하는지 ‘버튼’을 이용한 작업 예시를 간단하게 보여드릴게요. 하나의 버튼 안에도 상황에 따라 필요한 형태와 색상이 다양한 만큼, 컴포넌트를 생성한 이후 이렇게 필요한 베리언트를 자유롭게 추가하는 과정을 거치게 됩니다.
컴포넌트(베리언트) 와이어프레임에 사용하기컴포넌트와 그에 속하는 베리언트들을 생성한 이후, 와이어프레임을 제작하다 버튼이 필요한 상황에서 이렇게 컴포넌트를 붙여 넣고 상황에 맞게 필요한 베리언트로 교체하며 사용하고 있어요. 필요한 베리언트를 우연히 발견했을 때는 묘한 성취감이… 컴포넌트 기능은 처음 알고 사용할 때에는 가장 낯설고 어려운 개념일 수 있지만, 익숙해지면 가장 편리하고 효율적인 기능이 된다고 생각합니다.
또한 컴포넌트 수정뿐 아니라 CTRL + F를 누르면 파일 내 찾고 싶은 텍스트가 어느 위치에 총 몇 개가 분포되어 있는지 빠르게 찾아볼 수 있으며, 일괄 다른 텍스트로 변경도 가능한데요. 이는 작업 도중에 모든 설계서 내 공통적으로 문체나 띄어쓰기의 교정이 필요한 상황이나, 특정 단어를 일컫는 명칭이 바뀌게 됐을 때 (ex. ‘사용자’ → ‘고객’) 문구를 하나하나 찾아 바꿀 필요 없이 한 번에 변경할 수 있어 매우 편리하답니다.
(4) 다양한 플러그인의 활용
피그마의 가장 큰 매력은 뭐니 뭐니 해도 수많은 플러그인이죠. 피그마 커뮤니티 내 등록되는 플러그인은 지금 이 순간에도 꾸준히 출시되고 있습니다. 이러한 플러그인을 본인의 작업 니즈에 맞게 활용한다면 업무의 효율성을 크게 올릴 수 있어요. 저희가 설계서 작업을 하며 사용했던 대표적인 플러그인을 몇 가지 소개해 드리고자 합니다.
피그마는 문서 제작에 최적화된 프로그램은 아니기에 파워포인트처럼 우측 하단에 페이지 넘버를 자동으로 생성할 수 없던 단점이 있었어요. (1p, 2p, 3p … 이렇게요) 페이지 넘버를 자동으로 표현해 주는 Pager라는 플러그인을 사용하여 그 문제를 해결할 수 있었습니다. 모든 프레임의 우측 하단에 {#p}라는 단어가 기입해 놓은 상태에서 Pager를 구동하면, 해당 위치에 각 페이지의 번호를 순서대로 기입해 준답니다. 여기서 중요한 점은, 프레임들의 레이어 순서가 앞 페이지일수록 아래에 가야 한다는 사실!
Autoflow는 프레임과 프레임을 자동으로 화살표로 연결해 플로우처럼 보이게 만들어주는 플러그인입니다. 설계서 특성상 화면 간의 플로우를 설명하기 위하여 화살표를 이용한 장표 정리는 필수적인데요, 해당 플러그인을 사용하면 스트로크의 속성을 하나하나 변경하며 화살표를 제작하는 시간을 절약할 수 있어요. 사용 방법은 간단한데요, 플러그인을 실행한 상태에서 연결이 필요한 프레임들을 순서대로 선택하기만 하면 돼요. (프레임이 아닌 도형 단위도 선택과 연결이 가능해, 플로우차트를 만들 때도 응용할 수 있어요)
무료 아이콘을 제공해 주는 Iconify 플러그인은 와이어프레임 작업을 하다가 화면에 필요한 아이콘이 생길 시에 매우 유용하게 사용할 수 있습니다. 원하는 아이콘을 검색하거나 직접 찾은 뒤 ‘Import Icon’ 버튼만 누르면 바로 사용할 수 있어 아이콘을 직접 만들거나 웹사이트에서 이미지를 검색해 오는 시간을 대폭 줄여줘요. 또한, 없는 아이콘이 없을 정도로 다양한 종류의 아이콘이 있기에 UI 디자이너도 설계서 내 사용된 아이콘을 보고 추후 아이콘 디자인을 할 때 참고할 수 있답니다. 이와 유사한 플러그인으로 Material Design Icons도 함께 추천드릴게요.
AI가 각광받는 요즘의 트렌드에 맞춰, 원하는 분위기를 선택하면 그에 맞게 UX 라이팅 수정을 도와주는 FigGPT, 입력된 프롬프트를 따라 와이어프레임 디자인을 생성해 주는 Wireframe Designer, 페르소나부터 저니맵, IA, HMW까지 자동으로 생성해 주는 QoQo 등 생성형 AI와 관련된 플러그인도 지속적으로 출시되고 있어요. (다만 이러한 플러그인 중에서는 별도의 인앱 구매가 필요한 유료 플러그인이 많다는 점을 참고해 주세요!) 업무에 도움이 되는 플러그인과 최선의 활용법을 찾기 위해 내부 팀원들과 꾸준히 AI 플러그인 스터디를 진행하고 있답니다.
글을 마무리하며…
피그마로 설계서를 작업하는 것에 대한 장점을 극히 일부만 추려봤는데도 장점이 정말 어마어마한 것 같아요. 설계서를 작성하는 UX 디자이너는 압도적으로 빠른 속도로 설계서를 작성할 수 있게 되었으며, UI 디자이너와 개발자들은 프로그램 간의 허물어진 경계 덕분에 더욱 효율적으로 각자의 작업을 진행할 수 있었습니다. 또한 PPT/PDF 형식의 설계서를 선호하던 고객사에서도 링크 형식의 피그마 설계서를 더욱 선호하는 경향을 확인할 수 있었는데요, 그만큼 피그마가 접근성이 우수하고 적응하기 쉬운 프로그램이라는 것이 증명되는 것 같아요. 저희 사내에서도 프로젝트 팀 간 서로에게 필요한 피그마 설계서 포맷을 자유롭게 가져가 사용하고 있습니다. 각자의 프로젝트 성향에 맞게 컴포넌트/템플릿의 추가와 수정이 이루어짐으로써 무궁무진한 활용과 발전이 가능하다는 것도 피그마의 큰 매력인 것 같아요.
저와 같은 MZ에게 다루기 가장 익숙한 툴이기도 하죠 (피그마 사랑해요)