Zeplin에 아토믹 디자인(Atomic Design)을 적용한 LM 그룹과의 인터뷰를 공개합니다!

안녕하세요. 블로그 관리자입니다.

최근 웹사이트 구축에 많이 사용되고 있는 아토믹 디자인(Atomic Design)을 아시나요?
* Atomic(원자)+ Design(디자인) 합성어로, 최소 디자인 요소인 ATOMS(원자들)들이 모여 MOLECULES(분자들)을 구성하며, 이것들이 각기 다르게 조합되어 ORGANISMS(유기체)을 생성함을 뜻합니다. 즉, 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식의 디자인입니다.

아토믹 디자인의 가장 큰 장점은 디자인 시스템 구성에 있어서 ‘가이드라인’으로 활용할 수 있다는 점입니다. 때문에 작업자 주관으로 인한 작업에 어려움을 줄일 수 있습니다.

오늘은 아토믹 디자인(Atomic Design) 원리를 최근에 Zeplin에 적용한 LM 그룹의 모바일 디자인 팀(Mobile Design Team)의 팀장 Marco Silva와 나눈 인터뷰 내용을 소개해드리려고 합니다. 그럼 Marco Silva 팀장이 들려준 아토믹 디자인(Atomic Design)의 개념과 다른 팀과 협업을 하는 팁을 자세히 살펴볼까요?

LM Group?

- 1200 명 이상의 직원
- 수많은 온라인 여행 업계에서 선도하고 있는 다국적 상장 그룹
- lastminute.com, Volagratis, Rumbo, weg.de, Bravofly, Jetcost 및 Hotelscan과 같은 잘 알려진 브랜드 포트폴리오 운영
- 숙박 (호텔 및 휴가용 렌탈), 교통 (항공기 및 기차), 휴가 패키지 (다이나믹 패키지 및 전통 여행사 및 크루즈) 등 여러 주요 사업 운영

LM 그룹 모바일 디자인 팀(Mobile Design Team)의 팀장 Marco Silva

 

팀은 어떻게 구성되어 있나요?

저희 팀은 교차 기능 팀입니다. 전체 팀에는 Pod라고 부르는 소규모 팀들이 있습니다.

*Pod의 특징
▶ 제품 디자이너, 제품 관리자, 기술 책임자, 백엔드 엔지니어, iOS 및 Android 개발자로 구성
▶ Pod 별로 일일 미팅, 주간 업무 공유 등을 진행
▶격주로 pod, 디자인, 비즈니스팀이 모여 서로 서로의 업무를 공유

저희 팀은 제품에 대한 비전을 탐구하고 개발하는 것을 책임지고 있습니다. 그리고 저는 팀장으로서 팀원들에게 지침과 지원을 제공하며, 저희 팀이 일관적인 품질의 작업을 제공할 수 있도록 매일 업무를 공유하고 있습니다.

전체적인 디자인 워크플로우는 어떻게 되어있습니까?

저희 디자인 워크플로우는 비전과 재설계 두 개의 평행 트랙으로 이루어져 있습니다. 비전이 달성된다고 개발이 보장되지는 않지만 다른 트랙을 위해서 꼭 필요합니다. 현재 저희의 비전은 ‘디자인 관점과 기능 관점 모두를 더 탐구하자’입니다.

* 비전 특징
-비전은 시장에 민감하게 반응하기 위해 계속적으로 발전해야 합니다.
-비전에 맞춰 데이터를 보고, 설문 조사를 실행하고, 새로운 기능을 생성하면 고객의 만족을 충족시킬 수 있습니다.

* 재설계(re-design) 특징
-재설계 트랙은 비전 트랙과 비슷한 워크플로우이지만 훨씬 긴 트랙입니다.
-기능 및 콘텐츠 측면에서 현재 앱의 기능을 살펴보고 UX 및 UI 관점에서 업데이트합니다.
-비전 구축에서 습득한 것을 적용합니다.

그루밍(Grooming) 단계 후에 더 신중한 경쟁자 분석을 진행합니다. 만일 비전이 새로운 단계를 만족시키지 못하면 먼저 비전을 수정하고 개선해야 합니다. 다음으로는 사례별로 시나리오를 조사하고 구별해 해결해야 합니다. 이 작업이 완료되고 기술 책임자와 제품 관리자가 모두 만족하면 디자이너는 개발자가 작업할 수 있도록 모든 자산과 문서를 준비하기 시작합니다.

아토믹 디자인 (Atomic Design)은 무슨 개념인가요?

아토믹 디자인(Atomic Design)은 물질의 기본이 되는 구성 요소인 원자(Atomic)처럼 웹디자인을 웹의 구성요소인 컴포넌트로 나누어 파악하고 이 요소들을 조합하면서 전체적인 디자인을 구성하는 방식을 말합니다. 설계 시스템을 위한 개발 기술이며 다음 세 가지 핵심 기능으로 구성됩니다.

① 원자(Atomic)는 디자인 시스템을 구성하는 버튼과 폼(Input)과 같은 기본 구성 요소를 뜻합니다.
② 분자(Molecules)는 원자가 결합된 결과물로, 설계 시스템의 기초가 되어 하나의 목적만을 수행합니다.
③ 유기체(Organism)는 인터페이스에서 구분된 영역을 형성하는 분자 그룹입니다.

위의 세 가지 구성 요소가 템플릿과 페이지를 형성합니다.

원자, 분자, 유기체 세 가지 구성 요소를 이용하면 템플릿과 페이지를 만들 수 있습니다.

- 템플릿(Templates)은 페이지를 형성하기 위해 결합한 유기체 그룹입니다. 여기에서 개념이 모이고 레이아웃이 살아 움직이는 것을 볼 수 있습니다.

- 페이지(pages)는 ​placeholder​ 속성 컨텐츠를 제거하고 대표 컨텐츠로 대체하여 사용자가 실제로 볼 수 있는 정확한 그림을 제공합니다.

*Placeholder은 입력 필드 칸에 처음부터 표시되어 있는 디폴트 값의 연한 회색 텍스트를 뜻합니다.

아토믹 디자인 (Atomic Design) 개념이 디자인 팀에 어떻게 도움이 되었습니까?​​

제가 아토믹 디자인 (Atomic Design)에서 느낀 가장 큰 장점은 아토믹 디자인 (Atomic Design)의 원리와 사용법이 아닌 적용 과정이었습니다.

구성 요소를 만들기 위해 깊이 있는 학습을 하고 노력을 하면 할수록 일관되고 견고한 설계 시스템을 제작할 수 있었습니다. 그리고 앱을 구축하는 것은 빈 화면(blank slate)에서 모든 팀원들과 함께 작업하는 것이기 때문에 이 과정을 진행하는 것은 팀원들이 디자인 시스템을 구체화하는데 많은 도움이 됩니다. 이후에 Zeplin을 사용하여 자산(asset)을 내보내면 모든 항목을 쉽게 구성할 수 있습니다.

아토믹 디자인(Atomic Design)을 선택한 이유는 무엇인가요?

우선 아토믹 디자인(Atomic Design)은 제 직업의 본질적인 문제점을 해결하고자 노력하던 시기에 발견한 개념입니다. 그 당시 제가 해결하려고 했던 문제점은 기능을 개발할 때마다 무수한 아트 보드를 만들어 모든 시나리오를 시각화하고 이 모든 아트 보드를 Zeplin으로 내보내야 한다는 것이었습니다. 이 문제로 인해 Zeplin 상에 엄청난 혼란이 발생했고 업데이트 유지 관리가 매우 어려웠습니다.

이때 저희는 팀원인 Mattia가 만든 매우 좋은 아트 보드 명명 규칙을 사용하면서 아트 보드를 구성요소에서 분리하자는 아이디어를 생각해 냈습니다. 그 결과 각 구성 요소를 더 세분화하는 아토믹 디자인(Atomic Design)을 선택하게 되었습니다.

아토믹 디자인(Atomic Design)에서 가장 좋아하는 기능은 무엇입니까?

저는 픽셀의 완성도를 매우 중요하게 생각합니다. 그래서 제가 아토믹 디자인(Atomic Design)에서 가장 만족하는 점은 Zeplin의 최종 아트 보드를 만들 때 유기체로만 구성되고 그 사이에 놓인 픽셀이 날아가지 않는다는 것입니다.

다른 팀과 어떻게 협업합니까?

앱에서 협업하는 내용은 이미 위에서 몇 가지 말씀드렸습니다. 추가로 알려드리고 싶은 점은 웹과 앱이 협업하는 방법입니다.

저희는 업무를 시작하는 사람들에게 아이디어를 얻을 기회를 주기 위한 의견 공유 시간을 매주 갖습니다. 그러나 가장 효과가 좋은 것은 이미 작업했던 내용에 대한 지식을 공유하는 것입니다. 서로 이미 경험했던 지식을 공유함으로써 시행착오를 할 시간을 절약할 수 있기 때문입니다.

협업에 어려움이 있었나요?

네. 아무래도 디자인 시스템과 제품의 모양, 느낌과 관련하여 앱 팀과 웹 팀은 서로 다른 경로로 진행되기 때문에 어려움이 있습니다.

물론 앱 팀과 웹 팀은 몇 가지 공통점과 미래의 더 큰 디자인 시스템 구축이라는 궁극적인 목표를 갖고 있지만, 앱은 대담하고 탐색적이며 최첨단의 방향으로 작업이 진행되고 있습니다. 그래서 웹보다는 빠르게 변화할 수 있으며 제약도 적습니다.

다른 팀과 협업할 때 팁이나 조언이 있나요?

제가 경험했을 때 가장 효과가 있던 팁들을 알려드리겠습니다.

팁 1. 아트 보드 및 구성 요소의 이름을 정하세요.
: 각 아트 보드 및 구성 요소의 이름을 만들면 조직별로 정리가 되어 탐색하기가 매우 쉽습니다. 하지만 계속 간편하게 유지하기 위해서는 팁 2와 3도 필요합니다.

팁 2. 다른 사례의 시나리오에는 다른 아트 보드를 사용해 주세요.
: 개발자는 무언가의 위치나 동작 방식 등을 이해하는 것이 중요한 상황이 있습니다. 그리고 대부분의 경우 해당 아트 보드에 존재하는 구성 요소는 변경됩니다. 그래서 다른 사례의 시나리오를 구성 요소별로 유지하고 살펴봐야 처리할 아트 보드가 줄어듭니다.

팁 3. 디자인을 미리 보내지 마세요.
: 저희는 개발할 때를 맞춰서 시안을 내보냅니다. 그래야 구현될 화면과 저희가 보내는 디자인이 일치할 수 있습니다.

팁 4. 스타일 가이드 탭을 관리하는 사람이 너무 많으면 문제가 될 수 있습니다.
: 지금까지 저희는 팀원이 3명밖에 되지 않았기 때문에 아직 그 문제에 직면하지는 않았지만, 더 큰 팀의 경우 디자인 시스템을 위한 중앙 집중식 팀이 올바른 방법이라고 생각합니다.

Zeplin을 사용하기 전에 어떤 프로그램을 사용하셨나요?

Zeplin 사용 전에는 Adobe Photoshop에 비해 크게 개선된 Sketch를 사용했습니다. 그 후에 사용한 Zeplin은 Sketch와 호환되어 작업에 혼란이 없었습니다. 개발자를 위한 문서를 만드는 것은 매우 힘든 작업입니다. 진부한 표현처럼 들리지만 Zeplin이 제 인생을 바꿨습니다! Zeplin 덕분에 사용자 테스트를 통한 탐색 및 검증에 더 많은 시간을 할애할 수 있게 되었습니다.

Zeplin에서 가장 좋아하는 기능은 무엇이며 그 이유는 무엇입니까?​​

화면 오른쪽에 있는 정보 섹션입니다. 물론 정보 세션은 방대한 기능이죠. 좀 더 자세히 말하면 측정값 기능입니다! 이것은 제 생명의 은인입니다. 이 기능 덕분에 모든 단일 구성 요소에 대한 수정 지시를 작성하고 해당 동작에 대해 문서화하는 작업에 드는 시간을 많이 절약할 수 있었습니다.

 

LM 그룹의 워크플로우에서 Zeplin은 어떤 역할을 했나요?​​

저희 워크플로우에서 Zeplin은 디자이너와 개발자를 연결하는 주요 다리였습니다. 특히 저희는 개발 준비가 된 최종 설계 단계에서 Zeplin을 사용했습니다.

그리고 현재는 iOS 용과 Android 용의 2개의 프로젝트에 Zeplin을 사용하고 있습니다. 두 프로젝트의 화면은 매우 유사하지만, 상태 표시 줄, 일부 아이콘 등에서는 사소한 차이가 있습니다. 그래서 각 프로젝트 내에서 섹션을 사용하여 아트 보드를 구성하고 특정 명명 규칙을 적용했습니다. 이 명명 규칙은 아래와 같이 앱의 주요 접근점을 중심으로 만들어졌습니다.

● 집
● 검색
● 내 예약
● 내 프로필

스타일 가이드도 마찬가지입니다. 저희는 모든 요소의 95 %를 기반으로 iOS 및 Android 용의 2 개의 브랜치를 사용했습니다. 스타일 가이드 내에서 저희는 원자(Atoms), 분자(Molecules) 및 유기체(Organisms) 세 섹션으로 구성 요소를 분류했고 각각의 섹션 내부에는 Sketch 라이브러리에서 사용하는 것과 동일한 고유 한 명명 규칙을 반영하는 여러 그룹을 만들었습니다.

여기까지 Marco Silva 팀장님과의 인터뷰 내용이었습니다.

감사합니다.
 

이 글은 Zeplin의 LM Group’s approach to Atomic Design을 번역한 글입니다.