디자인 시스템을 공부해봤습니다.
배움의 축복은 끝이 없네
안녕하세요! 뮈뮈에요 ^.^
오늘은 디자인 시스템에 대한 이야기를 해볼까해요.
프로덕트단위로 프로젝트를 진행하다보니, 디자이너와 개발자들의 소통이 더 중요해졌어요.
저희는 과거에 사용하던 디자인 가이드를 업데이트 시켜 패턴으로 사용하다보니,
커뮤니케이션 비용 등 관리 업데이트에서 어려운점이 있더라구요.
그래서 개발팀에서 제안해주신 디자인 시스템에 대해서 공부하고자, 온라인 강의와 외부 강사님을 초빙한 교육을 진행하게되었어요!
ㅡ
디자인 시스템이 필요한 이유
디자인 시스템은 현재 다양한 기업에서 활용하고 있고, 개발하고 있어요.
시스템이 있으면 와이어프레임에서 부터 완성도가 있는 화면 구현을 할 수 있을 것이며,
디자인와 개발간의 커뮤니케이션 비용 절감이 있고 일관된 경험을 사용자에게 줄 수 있으며 브랜드 아이덴티티 관리에도 효과적이라는 다양한 이유들을 검색해보면 충분히 비슷한 답을 얻을 수 있을거에요.
하지만 이러한 장점에도 불구하고, 모든 프로덕트에 같은 컴포넌트만 적용한다면 제대로 된 경험을 저해시킬 수도 있을거 같아요. 같은 내용이라도 타겟층에 따라 레벨링이 달라져야하는 개인화 영역과 다양한 프로덕트 들이 한 서비스 안에 있을 때 경우의 수를 잘 고려해서 만들어야 하겠죠.
그리고 모바일과 PC라는 디바이스에 따라 달라지는 사용성도 고려해야되구요.
시스템이 가지고 있는 많은 장점들이 도드라 질 수 있도록 규칙을 세우고 운영이나 업데이트를 잘 해낸다면 정말 효과적일 것 같다는 생각이 들었습니다.
ㅡ
피그마 오토레이아웃
디자이너 출신 강사님을 추천해주셔서 처음엔 실습위주의 온라인 강의를 접했어요.
그리고 강사님을 초빙해 내부 교육을 진행하게 되었습니다.
실제 온라인 강의에서 듣지 못했던 자세한 설명을 들을 수 있었던 점이 좋았고,
그 동안 사용했던 피그마 툴의 용법이 조금 다르다는 것도 배우게 되었어요.
가장 흥미로웠던 것은 오토레이아웃을 많이들 활용하시는 걸로 아는데,
특정 텍스트가 가지고 있는 베이스 라인이 다르기 때문에 시각적인 부분을 맞추기 까다로운 부분도 있어서
개인적으로 활용을 지양했었거든요.
(알아서 레이아웃을 맞춰주는 훌륭한 기능임에도 불구하고요 ^.^a)
해결 방법으로 베이스라인 세팅을 할 수 있다는 사실을 알게 되었어요.
제가 알던 피그마의 그룹이 사실 오토레이아웃이어야 했던 것도 그렇고, 앞으로의 작업방식을 기본적으로 컴포넌트화 시키는 방향으로 해야겠다는 생각이 들었어요.
*저희가 들었던 온라인 강의 링크를 글 하단에 남길게요!
ㅡ
어떤 내용이었을까?
사람인에는 다양한 프로덕트와 담당자들이 있어요.
다들 시스템이 필요하다는 것에 대해서 공감하셔서 참석을 희망하셨구요.
실제로 사람인 프로덕트는 프론트를 맡아주시는 개발자분들의 UI구현 퀄리티가 좋다보니, 느낄 수 없었던 간극 때문에 디자인/개발 모두 시스템을 원하는 프로덕트들도 있었어요.
그리고 프론트엔드 개발자분들과 함께 강의를 들으며 시스템에 대한 align을 맞추려고 했는데, 다들 어떠셨는지 모르겠네요. ^.^
기본적인 개념부터 피그마 실습, 깃헙에 올리는 것 까지 알려주셨구요.
사람인 서비스에 사용되고 있는 UI 사례를 몇가지 실습하면서 확장성을 고려하는 부분도 생각해볼 수 있었어요. 온라인 강의에도 나오지만 디자이너의 작업방식과 개발자의 작업방식이 다르기 때문에 이부분에 대해 서로 이해가 필요하다고 생각해요.
개발에서는 오히려 작은 단위에서부터 조립하는 방식으로 작업한다면, 디자이너는 큰 단위를 작은단위로 만들어가는 방식으로 시스템화하기 적합해요.
그래서 저는 실습할 때 이미 만들어져 있는 UI를 보여 확장성을 고려할 수 있었다는 점에서 쉽게 배울 수 있었습니다!
몇 가지 예시 중 시스템화 할 수 있는 레이어 팝업
위의 레이어 팝업을 시스템화 한다면, 확장성이 충분히 고려된 현재 화면으로 활성/비활성 처리를 통해서 화면에 구현이 가능하게 되요.
auto-layout의 float이나 absolute 같은 속성을 활용하고, fixed/hug 등 css에 대한 어느정도 이해를 가지고 있다면 좋다고 합니다!
ㅡ
교육을 듣고보니
솔직한 후기는 '디자이너가 할일이 점점 더 많아지는 구나' 였어요ㅋㅋㅋ
사실 이렇게 함으로써 예전에 디자이너는 화면 구현에만 주력을 했다면, 기획부터 시스템까지 점점 프로덕트 내 영향력을 넓힌다고 볼 수 있을거 같아요.
실제로 디자인 시스템을 사용할 수 있냐 없냐에 따라 디자이너의 연봉에도 차이가 있다고 해요.
적어도 당장 시작할 순 없겠지만, 시스템화 하지 않더라도 컴포넌트 단위의 작업에서도 확장성 있는 UI를 생각한다는 점에서 시스템은 한번 쯤 공부해 볼만한 내용이 아닐까 싶어요.
저는 주로 디자인 패턴을 만들기보다 관리하는 입장에서 처음으로 실습을 접해보게 되었는데요.
그동안 힘써서 패턴 만들어주신 분들의 노고도 알 수 있었어요. ^.ㅜ 다들 대단하십니더...!!!!!!!
시스템화에 대해 다들 긍정적으로 바라보고 있고, 프로덕트의 확장성을 위해 시스템에 대한 공부나 시행착오가 더 필요할 것 같은 예감입니다 ^.^
*디자인 시스템 온라인 강의
