brunch

라이킷 45 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 미소지나 Jun 29. 2022

피그마 디자인 가이드 하루만에 쌉가능!!

피린이도 할 수 있다. 피그마 디자인 가이드.. 이럽게 쉽다구??

피그마를 사용하기 전 피그마의 장점을 들었을 때, 디자이너가 사용하기 좋은 툴이라고 생각했습니다.

아무래도 디자이너 출신인 사람이 만들었을 가능성이 다분..

기존에 쓰던 엑스디 제플린 조합을 합친 것만으로도 메리트다 충분한데 디자인 기능이 엑스디에 비해 훨씬 많이 추가가 되었다고 해서 그런 말들만 듣고 무작정 피그마로 갈아타기로 확정 후.. (따라줘서 고맙다 팀원님) 암튼 기능을 100% 활용도 해보지 못한 상태에서

프로젝트를 시작하기 전에 UI 디자인도 리뉴얼 할겸 가이드부터 디테일하게 새로 제작해보자 하는 마음으로 시스템 가이드를 작업하게 되었다.

시스템 가이드의 레퍼런스르 찾아보면서 느낀점은 아 너무나 제각각이다.

어플인지 웹인지 웹모바일인지 플랫폼인지 플랫폼의 성격이 무엇인지에 따라 가이드가 너무나 천차만별이였다. 혼돈의 카오스.. 어디서부터 건드려야할까 머리를 부여잡고 그렇게 웹 바다의 망망대해에서 떠돌다가는 한도 끝도 없을 것 같았다.

생각해보니 나는 관리자 웹사이트를 담당하고 있고, 관리자 웹사이트의 UI/UX는 비교적 심플한 편이다. 뇌파를 측정해 결과물을 보여주는 부분은 또 복잡하고 그래프도 엮여있지만 전체적인 구성을 봤을때, UI 가이드에 확립해줄만한 요소들이 그렇게 많지는 않았다.

그래서 피그마 시스템 가이드를 검색해보니, 피그마에는 이미 많은 사람들이 시스템 가이드를 커뮤니티에 올려놓고 사용하고 있는 것이다. 이럴수가.. 이렇게 좋은 자료들을 무료로 꽁짜로 공유해주다니 귯샷이다.

나도 나중에 분명히 성장해서 자체적으로 만든 훌륭한 가이드를 많은 사람들에게 배포해주고 싶다..예 됐구요.. 아무튼 그 많은 시스템 가이드에서 일단 좋아요 수로 배치를하여 한 번 걸러서 내게 맞는 가이드를 찾기 시작했다.

위의 피그마 홈화면에서 지구모양 아이콘의 커뮤니티를 클릭하시고 커뮤니티로 들어가서 Design Guide 라고 검색하시면 수많은 가이드가 검색이됩니다. 이 가이들들은 전부 바로 다운받아 적용이 가능합니다. 일단 한번 다운받아 보시면 정말 되네라며 신기방기한 기분이 드실겁니다. 고우고우!

보세요 이렇게 수많은 가이드가 반겨줍니다. 네 확실한 가이드이고, 이 모든건 바로 다운받아서 활용해보실 수 있습니다. 어떤 분들은 영상으로 활용법까지 아주 친절하게 올려놓으신 분들도 계십니다. 정말 복받을거에요. 저희 조상님 찬스를 피그마로 쓰는 그런 기분도 듭니다.

저는 좋은 가이드들이 많지만 여기서 제가 가장 최적화로 쓸 수 있는 가이드를 찾아 헤맵니다. 어찌됐던 필요한 부분은 정해져있기 때문에 저는 가장 기본적이고 심플한 가이드를 찾아야 했습니다.

화려한 가이드들은 거의 앱용 가이드로 기능적으로 너무 신기해서 써보고 싶은 가이드들이 많았지만 제가 100% 잘 활용할 수 있는 가이드를 받는게 저의 목표였죠.

무튼 가이드를 찾다가 제가 활용할 수 있는 요소들이 가장 많이 들어가있는 세로형 문서형식의 가이드를 다운받았습니다.

딱웹에서 필요한 기본적인 정보들로 이루어진 깔끔한 가이드였습니다. 여기서 필요한 부분만 가져가고 내용을 수정해서 알맞게 쓰는 방식으로 세상 간편하게 가이드를 완성 시키기 위해 바로 돌진했습니다.

실행이 곧 답이다.

빠르게 컬러를 지정해주고 타이포로 넘어가서 타이틀 및 컨텐츠 글씨 크기를 지정해주었습니다.

이렇게 해도 되는건가 싶을 정도로 너무 쉽게 진행되고 있는 중..

일단 1차 가이드는 러프하게 작업 후 계속 업데이트 해나가자는 식으로 생각을 비워내니 작업이 너무 가볍고 빠르게 진행됩니다. 다들 일단 시작하세요 시작이 반입니다

Spacing

여백을 지정해줍니다. 작업을 하다보면 여러 화면의 상황들이 있기 때문에 100% 이렇게 쓸수는 없지만 웬만하면 가이드의 여백지침에 맞게 활용을 하면 좋을 것 같습니다. 저는 4의 배수 단위로 여백을 지정해 주었습니다.

Textfields

사용되는 모든 텍스트필드를 그려줍니다. 일반 라벨 텍스트 필드와, 비활성 필드, 그리고 텍스트를 입력할때의 필드, 상태를 나타내주는 필드 등 디자인 지침을 모두 넣어주면 끝납니다. 아, 그리고 추가로 웹상에서 마우스로 텍스트를 긁었을 때의 이미지도 지정해줄 것입니다~! (2차 업데이트 적용)

Selectors

사용되는 모든 셀렉터의 모양을 그려줍니다. 드롭다운 박스, 일정을 설정해주는 드롭다운 박스, 체크박스, 라디오버튼, 토글버튼 셀렉버튼 등 모든 셀렉액션이 들어가 있는 버튼을 명명해줍니다. 셀렉이 되기 전 후의 화면 2종류가 전부 다 있어야합니다. 일정 설정에 써야하는 캘린더 UI 도 넣어줍니다. 세상 귀찮은 캘린더 디자인은 세상 심플하게 가져갑니다.

Buttons

화면에 사용되는 모든 버튼의 모양을 그려줍니다. 일반적인 버튼을 먼저 그려준 뒤, 서브로 활용되는 컬러의 버튼을 정의해줬습니다. 저희는 메인 키컬러 민트 위주로 진행되기 때문에 가장 중요한 버튼은 메인 민트컬러를 활용한 버튼이고, 나머지 컬러는 회색조로 지정했습니다. 라인버튼과 비활성화된 버튼도 지정해주었습니다. 아이콘 텍스트 와 첨부할 수 있는 버튼도 함께 만들어주었습니다. 물론 그 부분은 가이드내에 있는 버튼을 참조하여 비슷하게 따라해보았습니다.!!

Small Elements

위에 지정해준 UI 요소 이 외의 작은 엘리먼트들을 그려줍니다. 파일첨부바와 파일첨부 시 로딩되는 이미지, 상태별 파일 업로드 이미지를 지정해주었습니다. 모양별 프로그래스 바와 아바타가 들어간 기본 프로필 이미지, 배지들도 상태별로 지정해주었습니다. 툴팁과 토스트 팝업창도 지정해주었습니다. 이 외의 필요한 부분들은 지속적인 업데이트를 통해 추가해줄 예정입니다.

Big Elements

상대적으로 영역을 많이 차지 하는 큰 요소들을 그려줍니다. 리스트 위주의 관리자 화면이기 때문에 기본 리스트를 먼저 지정해주었습니다. 그리고 테이블 상단에 검색 기능이 들어가는 리스트 화면도 추가로 넣어주었습니다. 그리고 테이블간의 간격 및 타이틀 부분의 여백도 지정해주었습니다. 그리고 모달 팝업, 그림자 속성값, 아코디언 박스도 만들어주었습니다. 앞으로도 여러 형식의 리스트 화면이 추가될 것 같습니다. 요소들이 지속적으로 추가 업데이트 될 걸 생각해서 가이드 대지 화면을 가로로 넓어지게 수정을 해주어야 할 것 같습니다. 그것도 2차 업데이트에 반영해서 내보낼 생각입니다.

여기까지 피그마 시스템 가이드 작업을 마쳤습니다..!

길다면 길고 짧다면 짧은 여정의 끝,

시스템 가이드 작업을 마쳤지만 이제 시작인 느낌적인 느낌 ㅋㅋ

그래도 어느정도 정리가 되니 마음이 편안해집니다.

이제 개발에서 공통된 UI로 활용할 수 있게 UI 개선사항을 전달할 예정입니다.

기존 UI 에서 수정 및 업데이트 되야 할 부분이 많기 때문에 정리하여 1달에 2번씩 전달하여

차근차근 업데이트 할 계획이죠..!

이상 피그마를 활용한 시스템 가이드 1차 작업 진행상황을 한 번 남겨봤습니다.

피그마에 대한 자료들이 많은 듯 없는데, 이제 막 시작하신 피린이 분들에게

조금이나마 도움이 되었으면 하는 바램입니다.

keyword