디자인을 통해 배우는 개발 원칙
서비스를 만드는데 있어 원칙을 정한다는것은 어떤 의미일까?
사용자들에게는 우리 서비스를 이용함에 있어 불편함을 없애 만족감을 느낄수 있게 함이고,
서비스를 만드는 회사 또는 팀에게는 효율적인 의사결정에 도움을 주는 것이라 생각한다.
UI/UX 디자인을 함에 있어 다양한 원칙들이 있다.
이러한 원칙들을 기준으로 디자인관련 의사소통을 진행하게 되면 다양한 문제들을 해결하는데 도움이 되는것을 우리는 경험을 통해 잘 알고 있다.
우리가 만든 디자인을 실제 제품으로 개발을 하는데에도 다양한 개발원칙들이 있다.
피그마와 비교해서 SOLID 객체 지향 설계원칙에 대해 알아보자.
SOLID의 S에 해당하는 단일책임 원칙에 대해 위키에서는 다음과 같이 설명되어 있다.
객체 지향 프로그래밍에서 단일 책임 원칙(single responsibility principle)이란 모든 클래스는 하나의 책임만 가지며, 클래스는 그 책임을 완전히 캡슐화해야 함을 일컫는다. 클래스가 제공하는 모든 기능은 이 책임과 주의 깊게 부합해야 한다.
위의 이미지는 피그마에서 하나의 프레임을 그리고 그안에 사각형, 원, 삼각형을 넣어본거다.
사각형, 원, 삼각형은 각각 독립적으로 존재한다.
또한 프레임안에서의 각각의 위치도 독립적으로 적용되어 다른 객체에 영향을 미치지 않는다.
SOLID의 O에 해당하는 개발 폐쇄 원칙에 대해 위키에서는 다음과 같이 설명되어 있다.
개방-폐쇄 원칙(OCP, Open-Closed Principle)은 '소프트웨어 개체(클래스, 모듈, 함수 등등)는 확장에 대해 열려 있어야 하고, 수정에 대해서는 닫혀 있어야 한다'는 프로그래밍 원칙이다.
피그마에서 사각형, 원, 삼각형, 타원을 그려 보자.
쉐이프라는 상위의 개념을 통해 각각의 특징있는 모양으로 만들어진다.
이렇게 만들어진 사각형, 원, 삼각형은 쉐이프가 가지고 있는 Fill, Stroke, Effects를 사용할수 있다.
SOLID의 L에 해당하는 리스코프 치환 원칙에 대해 위키에서는 다음과 같이 설명되어 있다.
치환성(영어: substitutability)은 객체 지향 프로그래밍 원칙이다. 컴퓨터 프로그램에서 자료형 S S가 자료형 T T의 하위형이라면 필요한 프로그램의 속성(정확성, 수행하는 업무 등)의 변경 없이 자료형 T T의 객체를 자료형 S S의 객체로 교체(치환)할 수 있어야 한다는 원칙이다.
사각형, 원, 삼각형의 상위 개념은 쉐이프로 정의할 수 있다.
여기서 프레임은 사각형과 같아 보이지만 상위 개념이 쉐이프가 될수는 없다.
동물이라는 상위 개념은 하위 개념으로 파충류, 조류, 포유류로 나눌 수 있다.
또한, 포유류는 개, 고양이, 사람으로 나눌 수 있고 사람은 다시 흑인, 백인, 동양인등으로 나눌 수 있다.
동물의 하위개념으로 사람과 같이 움직일 수 있는 로봇을 대입해 보면 위에 나열된 어디에도 속하지 않는것을 알 수 있다.
SOLID의 I에 해당하는 인터페이스 분리 원칙에 대해 위키에서는 다음과 같이 설명되어 있다.
인터페이스 분리 원칙은 클라이언트가 자신이 이용하지 않는 메서드에 의존하지 않아야 한다는 원칙이다.
피그마에서 하나의 두개의 사각형을 그려보자.
첫번째 사각형의 Fill은 #FF5722 색상을 적용했고 두번째 사각형의 Fill은 이미지를 적용했다.
같은 사각형이지만 컬러를 바꾸는 행위와 이미지를 바꾸는 행위는 서로에게 영향을 미치지 않는것을 알 수 있다.
SOLID의 D에 해당하는 의존 역전 원칙에 대해 위키에서는 다음과 같이 설명되어 있다.
객체 지향 프로그래밍에서 의존관계 역전 원칙은 소프트웨어 모듈들을 분리하는 특정 형식을 지칭한다. 이 원칙을 따르면, 상위 계층(정책 결정)이 하위 계층(세부 사항)에 의존하는 전통적인 의존관계를 반전(역전)시킴으로써 상위 계층이 하위 계층의 구현으로부터 독립되게 할 수 있다.
피그마에서 프레임, 텍스트, 원을 그려보자.
프레임, 텍스트, 쉐이프는 Change Color를 가지고 있고 각 상위 개념을 통해 만들어진 하위 개념의 프레임, 원, 텍스트는 Change Color 행위를 통해 각각 다른 색상으로 바뀌는 것을 볼 수 있다.
이것을 자동차에 비유하자면 상위 개념은 현대차, 기아차, 쌍용차로 볼수 있고,
하위 개념은 광폭 타이어, 일반 타이어, 스노우 타이어로 비교해 볼수 있다.
색상을 바꾸는 행위는 타이어를 교체 하는 행위로 비교해 볼 수 있다.
SOLID 객체지향 설계 원칙으로 얻는 이점
코드의 재사용성
용이한 코드의 관리
확장이 쉬운 프로그램
손쉬운 유지 보수
신뢰도 높은 프로그램
피그마 디자인툴 자체도 위에 나열한 개발원칙을 바탕으로 만들어졌다고 보면 된다.
그렇기에 피그마로 디자인을 하는 행위 모든것이 객체지향 설계 원칙안에서 이루어진다고 보면 된다.