디자이너가 개발과 친해지는 방법
어디서부터 시작해야 하나?
디자이너가 개발을 배우는게 어려운 이유는 무엇일까?
html은 tag(div, button, input, h1, p)라는 재료를 이용해 디자인에 맞게 구조를 만드는 역할을 한다.
css는 html로 만든 뼈대위에 살을 붙여 디자인이 완성된 웹페이지를 만든다.
js는 이렇게 만들어진 웹페이지의 구성요소들의 움직임 또는 필요한 기능을 수행한다.
개발을 학습한 디자이너들이 공통적으로 하는 말이 'html, css, js는 해봤어요~' 이다.
이말을 듣고 어떤 규모의 프로젝트를 만들 능력이 있는지 가늠하기는 어렵다.
위에 나열된 html, css, js는 시각적으로 보여지는 부분들만 개발로 풀어낸것이기 때문이다.
실제 사용자들이 사용하기에는 아직 부족하다.
실제 사용자에게 전달되기까지의 과정에 대해 개발자가 해야할 일이 뒤에 숨어 있기 때문이다.
https://brunch.co.kr/@eddwardpark/50
무엇을 위해 개발을 배우나?
개발과 친해지고 동기부여를 위해 가장 필요한것은 실제 업무에서 필요한 반복적이거나 수작업으로 하기에는 힘든일을 찾는게 먼저인것 같다.
개발은 반복적으로 발생하는 문제를 해결하는 도구이다.
이런 문제들을 계속해서 해결하다보면 어느순간 개발자에 가까워진 자신의 모습을 볼 수 있게 될거다.
어디서부터 시작해야 하나?
필자는 최근 다양한 외부 프로젝트들을 진행하면서 디자인시스템을 반복해서 정의를 하는 일을 하게 되었다.
이 과정에서 컬러 시스템의 근간이 되는 primary, secondary, success, info, warning, danger 색상을 정의하고 9~10단계의 컬러 팔레트를 작성했다.
다양한 컬러 제너레이터 툴들을 사용해 메인 컬러를 정한후 팔레트 작업을 진행했다.
몇번의 과정을 거치다 보니 상당히 반복적이고 시간이 많이 필요한것을 체험하게 되었다.
컬러 팔레트 작업을 하는 과정의 문제를 해결해보고자 google sheet의 script를 만들게 되었다.
위의 이미지는 컬러 팔레트를 easing(https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) 함수를 이용해 컬러 팔레트를 테스트하는 과정의 일부분이다.
HSL 컬러 시스템의 Saturation, Lightness의 각 구간의 값을 구글 시트로 만들었다.
이렇게 입력된 데이터를 차트를 사용해 구간별 변화량을 시각화 하였다.
여기까지는 구글 시트의 기본 기능들을 활용하여 만들었다.
각 구간의 컬러 요소값을 바탕으로 script를 작성하여 구간별 컬러값을 데이터 셀의 배경색에 적용하였다.
개발은 강의보다 스스로 학습하는것
실제 쓰여진 개발 코드는 굉장히 간단하다.
이 간단한 코드가 완성되기까지의 과정은 며칠이 걸렸다.
구글 시트의 스크립트 예제를 통해 구글 스크립트 작동방식을 알게 되었고,
구글링을 통해 rgb (255, 0, 0) ↔ hex (#FF0000), rgb (255, 105, 105) ↔ hsl (0, 1, 0.7)
컬러 변환에 대한 함수 공식을 알게 되었다.
스크립트가 작동해서 정확한 컬러가 구글시트에 뿌려지는 순간 엄청난 희열을 느낄 수 있었다.
이 느낌은 흡사 마약과도 같다. 문제 해결에 대한 보상이 마약과 같은것이다.
이것을 느끼게 되면 개발에 대한 의욕이 더욱 솟구치게 된다.
그 과정은 굉장히 힘이 들지만 완성했을때의 그 느낌, 그것이 개발을 지속적으로 하게 하는 원동력이다.
