🖌 디자인 시스템은 왜 필요할까?

🎈 한 줄 요약 - 모든 제품의 인터페이스가 일관성을 유지할 수 있게 도와준다. ✔️ 디자인 시스템이 없는 환경을 생각해본 적이 있나요? 저는 있어요. 일도 해본 적도 있어요. 디자이너가 없던 경우도 있었지요. 스타트업을 창업하고 운영하다보니 말이에요. 정말 힘들었어요. 일관된 디자인이 나오지 않았고, 컴포넌트가 동일하게 유지되지 않아 일일이 다 만들어야 했거든요.😱 ✔️ 그럴 때마다 디자인 시스템을 만들어야 할까? 라는 생각을 수도없이 했어요. 현재 회사에 입사하기 전에도 디자인 시스템이 없었는데요. 이를 대체하기 위해 자체적으로 UX Writing 가이드를 만들어, 그 안에 디자인 시스템을 녹여내기도 했지요. ✔️ 하지만, 디자인 감각이 떨어지는 제가 해내기에는 어려운 일이었어요. 물론, UX Writing 가이드도 완벽하다고 할 수 없었어요. 임시방편으로 만들었던 자료이기 때문이죠. 그래서 대표님의 입맛에 따라 디자인이 바뀌고, 개발하기 편한 방향에 따라 디자인이 바뀌기도 했어요. ✔️ 그래서 디자인이 일관되지 않았죠. 이 페이지와 다음 페이지에서 동일한 내용이 나타나는데, 디자인은 완전 다르게 적용되는 거예요. 제가 직접 테스트도 했었는데, 사용성이 많이 떨어지고, 같은 내용임에도 다른 UI를 제공해 신뢰도도 떨어졌어요. ✔️ 또한, 같은 내용이 페이지에 따라 UI가 달라지면서 비효율적인 작업이 많이 발생했어요. 디자이너는 2개의 UI 컴포넌트 작업을 해야 했고, 개발자는 동일한 리소스임에도 다른 개체를 만들어야 했죠. ✔️ 개발이 복잡하다는 점은 확장성에도 문제를 일으켰어요. 같은 UI가 다른 페이지에 놓여있을 때, 최신화된 페이지에 따라 전체를 변경해야 하는데, 쉽지 않았던 거예요. 결국 일일이 찾아서 변경하는 즉, QA 작업에 상당히 많은 시간을 할애했죠. ✔️ 다양한 문제에 직면하며 '디자인 시스템'이 너무나도 간절했어요. 하지만 더 간절했던 점이 있었는데요. 바로 '사업 유지'였죠. 사업이 잘 굴러가야 디자인 시스템이든 뭐든 만들어 유지할텐데, 그 환경이 뒷받침해주지 않았던 거예요. 그래서 결국 포기하게 됐죠.🥲 ✔️ 그럼 만약 디자인 시스템이 있었다면, 우리는 좀 더 효율적이고 발전적으로 사업을 이끌어갈 수 있었을까요? 전 자신 있게 '그렇다'라고 말할 수 있어요. 너무 자신을 믿는 거 아니냐고요? 맞아요. 그냥 믿는 거죠 뭐. 🧐 ✔️ 여튼, 저는 해보지 못한 디자인 시스템, 어떻게 만들었는지 한 번 살펴볼까요? ✅ 더 빠르게 더 효율적으로 1. 디자인 파일과 심볼 정리 ✔️ 반복적으로 사용되는 디자인은 공통점이 있을 거예요. 이 공통점에 따라 하나로 묶고 나머지는 과감하게 정리해버리는 거죠. 그렇게 되면 사용할 수 있는 파일은 적어지지만, 활용할 방안은 넓어지는 거예요. 이렇게 묶은 디자인 파일을 라이브러리에 넣었는데, 하나만 업그레이드 하면 전체가 다 업그레이드 되는 기능을 활용했다고 해요. 2. 네이밍 규칙 정의 ✔️ 파일이 잘 정리돼 있어도 그 안에서 쏙쏙 빼낼 수 있는 기술이 필요해요. 이를 도와주는 것이 바로 '파일 이름'이죠. 보통 파일 이름으로 검색하기 때문에 편리하게 파일을 찾고 적용할 수 있어요. 3. 장인은 도구를 탓하지 않는다지만 ✔️ 스케치에 큰 문제는 '공동 작업'이 불가능한 점이에요. 한 사람이 디자인 업무를 하고 있으면, 다른 사람은 개입하여 디자인 작업을 할 수 없게 되죠. 다른 형태로 업무에 로드가 걸려버리는 거예요. 이를 해결할 수 있는 방안이 가장 필요했다고 해요. 4. 찾았다, 피그마! ✔️ 최근 어도비에서 인수해서 화제가 되었던 서비스 바로, 피그마죠. 피그마는 공동 작업을 할 수 있기 때문에 정말 편리해요. 최근 2022년 디자인 툴 서베이에서도 피그마는 1등을 차지했는데요. 디자인 툴로써 그 인기가 아주 드높은 상황이죠. 또한, 스케치가 해결하지 못한 문제를 척! 척! 해결하기도 하구요. 5. 본격 스터디 ✔️ 하지만 곧장 툴을 바꾸는 것은 어려워요. 왜냐? 당장 업무를 해야 하는데, 새로운 툴에 적응하느라 시간을 쏟아야 하기 때문이죠. 이를 위해 미리 스터디하는 것은 필수로 요구돼요. 저자는 장점과 단점을 비교했다고 하네요. 📈 피그마 장점 • 동시에 여러 명의 디자이너가 하나의 디자인 파일에 들어와 함께 작업할 수 있다.(공동 작업 기능) • 개발자는 언제든 들어와 디자인을 살펴보고, 코멘트를 남기거나 코드를 볼 수 있다. (코멘트 기능) • 간단하게 고퀄리티의 프로토타입을 만들 수 있다. (프리젠테이션 기능) • 링크만 공유하면 누구든 들어와서 의견을 남길 수 있다. (웹 링크 사용 기능) 📉 피그마 단점 • 스케치에서 기본 제공하는 마법봉이 없다. • 컬러 스포이트가 툴 밖에선 작동하지 않는다. • 브라우저의 이미지 드래그 앤 드롭이 제한적이다. • Auto Layout 설정이 제한적이다. • 한글 입력 버그가 있다. 6. 스터디 결과는? ✔️ 단점이 있었지만, 이 단점을 상쇄할 수 있는 방법이 있었다고 해요. 특히, Auto Layout 기능은 업데이트를 통해 스케치보다 더 유연하고 편리하고요. 스타트업으로 시작해서 그런지 버그나, 부족한 부분들을 빠르게 수정하는 모습을 보여주더라고요. 이러한 결과 끝에 저자는 스케치를 대신하여 피그마를 사용하기로 결정했어요. ✅ 스케치에서 피그마로 이사하기 1. 스케치 파일을 피그마에 임포트 하기 ✔️ 초기 제품이 여타 그렇듯 피그마도 안정적이지 않았대요. 스케치 파일을 임포트해도 많은 부분이 깨졌던 거죠. 마냥 임포트하면 다 해결될 거라 생각했지만 그렇지 않아서 생각보다 많은 문제가 발생했나봐요. 이 문제를 해결하기 위해 스케치 파일을 정리하고, 플러그인의 도움을 받아 대략적인 문제를 해결했다고 해요. 2. 많이 사용했던 스케치 플러그인 ✔️ 저자는 이사를 위해 3가지 플러그인을 많이 사용했다고 해요. 하지만 보조의 수단으로 사용했을 뿐, 의도대로 전체가 적용된 것은 아니라고 해요. • Symbol Organizer: 심볼을 자동으로 정렬 • Unused Style Remover: 정의된 스타일 중 사용하지 않는 스타일 삭제 • Symbol Instance Renamer: 심볼 인스턴스의 이름을 마스터 심볼 이름으로 변경 3. 많이 사용했던 피그마 플러그인 ✔️ 앞서 말했듯, 완벽하게 원하는 바대로 흘러가지 않았어요. 그때 4가지 피그마 플러그인의 도움을 받은 거죠. • Select Layers: 이름이나 타입으로 원하는 요소 선택 • Rename It: 레이어의 이름을 바꾸는 플러그인 • Clean Document: 스케치 파일을 피그마로 가져왔을 때, 숨겨진 레이어가 가끔 있어서 한 번에 지우거나 정리할 때 사용 • Design System Organizer: 컴포넌ㄴ트를 조금 더 쉽고 효율적으로 관리할 때 사용 ________________ ✔️ 여기까지가 1편 내용이에요. 전체적으로 요약해보자면 다음과 같아요. • 시스템 가이드는 서비스 일관성을 유지하고, 사용자에게 신뢰를 주기 위해 필요하다. • 또한, 디자인 작업을 효율적이며 효과적으로 실행하기 위한 수단이 된다. • 스케치로 디자인 작업을 하다보니, 효율적인 업무를 방해하는 부분이 생겨 이를 대체할 수단을 생각하다. • 스케치 디자인 툴이 가진 단점을 보완하고, 작업 능률을 향상하기 위해 피그마를 사용하다.