디자인 시스템에서의 Pattern

디자인 시스템을 막 시작한 당신에게 Part.4

Pattern은 단어 그대로 이해하면 쉽습니다. 개별적으로 존재할 수 있는 컴포넌트들이 모여 반복적인 사용이 있을 때에 우리는 그것들을 패턴이라고 부를 수 있습니다.

구체적인 예시를 보자면, Linkedin에서는 아마 이 프로필 컴포넌트들을 많이 사용할 것 같아요. 저는 임의로 'Hero card'라고 이름을 붙여보았습니다. 아래 이미지를 보고 이해하면 쉬울 것 같아요.

'패턴'의 예시 (Linkedin)

녹색으로 표시된 '컴포넌트'들로 이루어진 카드의 '패턴'으로써 이 플랫폼에서 Hero card는 profile 페이지에서 빠질 수 없는 패턴일 것 같은데요. 이렇게 케이스에 맞는 패턴들을 따로 만들어서 키트를 만들어두면 디자이너들이 가져다가 사용하기 쉽습니다.

'패턴'의 예시 2 (Linkedin)

집 짓는 것에 비유한다면, 키친에서 흔히 볼 수 있는 선반, 조리대, 수전 등은 항상 필수적인 요소로서 붙어다니는 컴포넌트들이라고 생각해볼 수 있겠고요. 그것들을 그룹화하여 패턴으로 만들어 놓으면 디자이너들이 사용하기 수월할거에요.

더 나아가, Features와 Screens이 있는데요.

Features는 템플릿과 비슷하면서도 이름처럼 '기능'과 연관지어서 좀 더 복잡한 플로우를 갖고 있습니다. 예를 들어, Linkedin에서 로그인할 때에 아이디나 비밀번호를 잘못 입력해 알람을 볼 수도 있고요, 비밀번호를 재설정 하게 되는 등 다양한 Features들이 '로그인'이라는 기능을 중심으로 필요할 것이에요.

그 외에도 검색기능, 프로필 편집 기능, 사람들이 업로드한 피드에 대한 리액션이나 댓글 등이 있습니다.

Screens는 로그인 화면, 프로필 화면, 뉴스피드 화면 등이 될 수 있겠죠?  이렇게 점점 더 크게 확장되어 개념들을 이해할 수 있습니다.

여기까지 디자인 시스템을 이루는 요소들을 알아보았고요. 다음에 또 기회가 된다면 문제상황이나 새로운 패턴을 정의하는 예시를 케이스스터디로 풀어보는 것도 재밌을 것 같네요.

읽어주셔서 감사합니다. 그 외에 디자인 시스템이나 직무에 관해서도 궁금하신게 있다면 편하게 물어봐주세요. 제가 답해드릴 수 있는 한 도와드릴게요!