UX 디자인 패턴

 

사용자를 끌어들이는 UX/UI의 비밀 - YES24

개발자로서 UX/디자인을 좀 더 체계적으로 알고 싶은 마음에 몇 권의 책을 읽어봤지만, 대부분 자기계발서처럼 당연한 얘기만 하거나 심리학과 엮어 흥미롭지만 실무에는 잘 와닿지 않는 책이 대부분이었어요. 그러던 중 읽게 된 이 책은 개발자와 디자이너를 연결하는 딱 그 부분, 제가 원하던 그 연결 고리에 대해 다루고 있었고 이미 개발은 하고 있었지만 원리에 대해서는 알지 못하던 부분을 시원하게 긁어주었죠.

 

뒷표지. 스테디 셀러네요!

이 책은 디자인 패턴에 대해 소개하는데, 프로그래머들에게 익숙한 GoF 디자인 패턴이 아니라, UX 디자인 패턴이었어요. 평소에 사용하던 오픈 소스 UX 프레임워크들 - Bootstrap, Reactstrap, Ant Design 등의 기본 컴포넌트들을 보면 Button, Collapse, Modal, Pagination 등 겹치는 것들이 많았는데, 바로 이것들이 디자인 패턴이었던 것이죠.

 

책에서는 각각의 디자인 패턴에 대해 그것이 무엇인지, 언제 어떻게 쓰는지, 어떤 효과인지 등을 설명합니다. 비쥬얼은 빠르게 변하더라도 디자인 패턴은 서서히 추가/변경되는 듯한 인상이에요. 몰랐던 것은 이 기본 컴포넌트들 뿐만 아니라 그것들이 조합된 템플릿, 페이지 등도 패턴으로 본다는 점이고 컴포넌트 관점뿐만 아니라 시각적이나 다른 디자인 요소에 대한 패턴들도 많습니다.

 

책은 아토믹 디자인에 대한 설명으로 마무리합니다.

왜 아토믹 디자인인가?

아토믹 디자인: 원자 - 분자 - 유기체 - 템플릿 - 페이지

아래 레퍼런스에서와 같이 아토믹 디자인에 대한 장단점이나 논쟁은 많겠지만, UX 디자인을 잘 모르는 저같은 개발자에겐 디자이너와 개발자가 엮여있는 듯한 아토믹 디자인보다 나은 다른 대안이 있는지는 잘 모르겠습니다. 

 

 

References

Using Atomic Design to Structure React Applications - Andela

아토믹(Atomic) 컴포넌트 디자인 개발 패턴