피그마로 그려보는 객체지향 디자인 패턴 3가지 CSB
비개발자도 이해하는 디자인 패턴
피그마로 직접 그린 이미지바퀴를 다시 발명하지 마라.
필자는 디자인을 하거나 개발을 할때 이 문장을 먼저 떠올린다.
디자인 작업시에는 피그마 커뮤니티를 통해 공유되는 디자인 에셋들을 활용한다.
개발 작업시에는 NPM을 통해 공유되는 개발 라이브러리를 활용한다.
과거 개발자들은 프로젝트를 만드는 과정에서 다양한 문제들을 경험했다.
이런 과정에서 문제를 해결할 수 있는 다양한 해결방법들을 만들어 냈다.
객체지향의 디자인 패턴은 이러한 문제에 대한 해결책을 제시한 청사진인거다.
패턴의 개념은 Christopher Alexander가 'A Pattern Language : Towns, Buildings, Construction' 책에서 처음 설명했다.
이책은 도시 환경을 설계하기 위한 언어를 설명한다.
도시에 녹지를 얼만큼 만들어야하는지? 건물의 높이는 얼마여야 하는지? 건물에 창문 크기는 얼마로 만들지에 대한 각각의 내용을 패턴이라 정의 했다.
객체지향 디자인 패턴을 알아야 하는 이유는 무엇일까?
디자인 패턴은 문제 해결에 대한 솔루션이다. 당장 문제가 발생하지 않더라도 다양한 패턴을 사용하여 만든다면 앞으로 발생할 문제에 대한 해결책이 될것이다.
디자인 패턴은 디자이너, 개발자등 프로젝트 구성원들이 공통적으로 사용하는 언어이기에 효율적인 커뮤니케이션에 적합한 도구인것이다.
피그마로 직접 그린 이미지객체 지향에서 디자인 패턴은 builder, singleton, decorator, observer등 그 수가 적지 않다.
이렇게 많은 패턴은 크게 세가지로 나누어진다.
필자는 이러한 세가지 대분류를 신호등의 녹색, 노란색, 붉은색을 차용하여 시각적으로 분류하였다.
녹색 : 생성과 관련한 패턴 ( Creational Patterns )
노란색 : 구조와 관련한 패턴 ( Structural Patterns )
붉은색 : 행위와 관련한 패턴 ( Behavioral Patterns )
각 세가지 분류안에 속한 패턴은 타입별로 구분을 하였다.
하늘색 원 : 클래스 ( Class )
노란색 사각형 : 객체 ( Object )
피그마로 직접 그린 이미지생성 패턴은 기존 코드의 유연성과 재사용을 증가시키는 다양한 객체 생성 매커니즘을 제공한다.
피그마에서 원, 삼각형, 사각형을 그리는 행위는 객체지향의 생성 패턴과 닮아있다.
각각의 도형은 캡슐화가 되어 있어 특정 도형의 모양, 색상, 위치등이 변경되어도 다른 도형이나 다른 객체들에 영향을 주지 않는다.
피그마로 직접 그린 이미지구조 패턴은 각각의 객체와 클래스가 가진 구조를 유지하면서 이를 조합하여 큰 구조로 만드는 방법을 제공한다.
위의 이미지처럼 각각의 도형에 색상을 만드는 행위, 테두리를 만드는 행위, 그림자를 만드는 행위등을 추가하여 우리가 원하는 최종 결과물을 만들수 있다.
피그마로 직접 그린 이미지행위 패턴은 각 객체나 클래스간의 책임에 대한 방법을 제공한다.
위의 이미지는 행위 패턴중 state patten을 피그마로 시각화 한것이다.
원과 삼각형은 피그마의 보기 모드를 끈 상태이고 사각형은 보기 모드를 켠 상태이다.
