(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에게 다루기 가장 익숙한 툴이기도 하죠 (피그마 사랑해요)

시대가 빠르게 변하며 그만큼 새로운 프로그램이 등장하는 텀이 짧아지고 있다는 것을 온몸으로 실감하는 요즘입니다. 트렌드에 누구보다 예민해야 하며, 늘 새로움에 뛰어들어야 하는 디자이너로서 더 나은 툴에 대한 선행학습과 시도에는 끝이 없다고 생각해요. 남다른 크리에이티브를 추구하는 플러스엑스는 앞으로도 더 높은 업무 효율도와 프로젝트의 완성도를 위해 도전을 멈추지 않고, 끊임없이 발전을 거듭해 나갈 예정이니, 저희의 멋진 변화를 함께 지켜봐 주세요!

(♡) 스페셜 땡스 투. 브런치 작성 인사이트를 주신 수현님, 주혁님, 다비님,주아님 그리고 유진 디렉터님