디자이너를 위한 코드 with Framer #1
조금 후킹한 제목을 달았지만, 막상 열어보면 별거 없다. 그래도 한 번 시작해보기로 했다.
1. 이 글을 포스팅하는 이유
요즘 많은 디자이너들이 코드라는 이 ‘요물’때문에 이 놈을 공부해야하는지 망설이고 있을거라 생각된다. 아마 이 글은 “그래도 한 번 공부해봐야 겠다.”라고 마음먹은 사람들이 시작하기에 도움되는 글일 것 같다.
그 동안은 내가 작업하던 코드는 남에게 보이기 부끄러운 수준이라고 생각했고 얕은 지식으로 남에게 설명하면 주제 넘는 느낌도 들고 편협한 가이드라인을 줄 거라는 느낌이 들어서 꺼려왔는데. 디지털미디어디자인 학과를 졸업한 나로서 꽤 오래전부터 다양한 경로로 코드를 접해왔고, 다른 직군의 사람은 몰라도 디자이너 사이드에서는 이제는 도움을 줄 수도 있겠다는 생각이 들어서 :)
그래서 코딩에 어느정도 지식이 있거나 전문적으로 하는 분들이 보기에는 디자이너에게 와닿는 설명을 위해서 조금은 부정확한 설명이나, 좁은 의미의 개념 정의가 포함 될 수도 있다.
주 툴로 Framer를 선택한 이유는 딱히 번거로운 개발환경 셋팅 필요없이 프로그램 하나만 깔면 되기 때문이다.
2. 시작하기 전
“다 할 수 있다. 하지만 우리는 개발자가 아니다.”
요즘에는 맘 먹으면 못하는게 없다. Google은 우리에게 많은 능력을 주었다. 이 글에서 해결이 안되는 부분은 Google에서 검색하거나 Framer docs를 참고하면 된다. 가끔 어려운 개념을 두고 이해하지 못하면 다시 중도에 멈추게 되고 코드를 멀리하게 된다. 이 때 굳이 그걸 이해하려고 들지 말자. 할 수 있는 범위에서 무식하게 코딩하면 된다. 무식한 걸 숨기려 들면 더 아무 것도 할 수 없게된다. 심지어 Framer 사이트에 소개된 예제들도 한땀한땀 코딩된 예제가 수 없이 많다.
우리는 개발자가 아니다. 그래서 코드가 걸레짝이 되어도 괜찮다. 코드 좀 아는 사람들이 말하는 “이건 이렇게 해야돼.” 를 이해하지 못한다고 해서 포기할 필요가 없다는 말이다. 다만 하다보면 내 코드가 엄청 무식하게 느껴질 때가 있는데, 그때 다시 들여다 보면 된다. 단 번에 못하는 건 너무나도 당연하다.
3. 우선은 욕심을 버리고 포토샵 하듯이!
디자이너를 위한 글이기 때문에 비교대상을 포토샵으로 잡았다. 간단한 예제로 시도해보자! 포토샵에서 무언가를 그리기 위해서 제일 먼저 하는 게 레이어 만들기 일거다. 포토샵은 뭔가 끄적거리기만 하면 레이어를 만든다. 이 것부터 해보자. 아래는 Framer로 만들어볼 그림이다.
총 5개의 레이어로 이루어진 간단한 와이어프레임이다. 포토샵 레이어창 하단에 보이는 Create a new layer라는 작은 버튼에 주목해보자. 컴퓨터에게 일 시키는 방식은 포토샵이든 Framer든 비슷하다.
포토샵에서 그렸던 것과 같이 5개의 레이어를 만들었다. backgroundColor를 지정하고 레이어의 width, height만 지정해주었다.
“잠깐만, 갑자기 너무 훅 가는거 아니야?”
new Layer는 뭐고 backgroundColor, width, height는 뭐야. 난 그런거 하나도 몰라라고 말하는 사람이 있을거다. 나중에 코드에 사용되는 용어들은 별도로 설명을 하겠지만, 간단하게 설명하면. Framer라는 고마운 툴은 최대한 우리가 사용하기 쉽게 몇 개의 컴포넌트들을 미리 정의해놓았다. (우리가 만들 필요가 없다는 이야기)
그 중 하나인 new Layer는 포토샵 레이어 창에서 “Create a new layer”와 거의 동일한 기능을한다. 다만 포토샵에서 내가 새로운 레이어를 만들면 자동으로 “Layer 1”이라는 이름을 붙여주지만 Framer는 내가 정해주어야 한다.
bg_image = new Layer위 코드는 bg_image라는 이름으로 새로운 레이어를 만들겠다는 의미다. 이름을 붙여놓아야 이 레이어를 컨트롤할 수 있기 때문이다. 이 부분은 ‘변수’라는 놈을 설명해야 하지만 우선은 이름을 붙인다 정도로 이해하자.
Tip 1. 컴퓨터 언어에서 이퀄(=)의 사용은 뒤의 것을 앞의것에 대입하겠다는 의미다.
Tip 2. 프레이머는 CoffeeScript를 기반으로 만들어졌기 때문에 들여쓰기는 Tab을 써야한다. 사소한 띄어쓰기나 들여쓰기가 잘못 될 경우 Error가 난다.
만약 우리가 포토샵에서 사각형의 레이어를 만들었다고 했을때 할 수 있는 일을 떠올려보자.
- 사각형 색상 변경, 크기 변경, 위치 변경, 모서리에 Radius추가, DropShadow추가, border추가. 등등
포토샵 레이어로 할 수 있는 것들이 Framer의 레이어로도 가능하다. 할 수 있는 것들을 모두 확인해보기 위해서는 Framer Docs의 Layer항목을 참고 하는게 가장 정확하다. 그렇다고 그걸 다 외울 필요는 없다. 필요할때 찾아보면 되니까. 자주 쓰는 것들은 싫어도 외우게 된다.
그럼 레이어 색상변경과 크기는 이미 해놓았다. 위치변경과 Radius추가를 할 차례다. 어떻게?
위 링크에서 Layer라는 항목을 찾아 클릭해보면 레이어로 할 수 있는 것들의 목록이 엄청나게 많이 있다. (과연 죽기전에 다 써볼 수 있을까.)
Docs를 보면 Layer에는 x, y라는 속성이 있다. 그래 포토샵에서 익숙하게 봐온 x, y좌표다. 그리고 radius로 검색하면 borderRadius가 나온다.
x, y 좌표와 radius가 필요한 도형에 borderRadius를 추가해주었다. Wow! 포토샵으로 그린 것과 똑같다. 이런 요령으로 shadow도 넣고 border도 줄 수 있다.
Tip 3. Layer에 속성을 주는 방식은 두 가지 방식이 있다.
test = new Layer
backgroundColor: "#000000"test라는 레이어를 만들때 검정색을 지정하여 만들었다.
test = new Layertest.backgroundColor = "#000000"
test라는 빈레이어부터 만든 후에 검정색을 지정해줬다.
Q. “근데 왜 머리 아프게 두 가지 방식이 있는거지? 그리고 왜 하나는 콜론(:)으로 쓰고 하나는 이퀄(=)로 쓰는거야?”
A. “아직은 알려고 하지마. 머리다쳐… ”
자, 여기까지 잘 따라해봤다면 아주 짜증나게 편한 기능을 하나 소개하고 이번 글은 마치려고 한다. 바로 PSD import 기능이다. 다만 그 전에 프레이머에서 레이어로 관리할 항목을 포토샵에서 그룹으로 지정해주어야 한다.
그 다음, 포토샵 작업 파일을 저장하고, 프레이머 좌측 상단에 있는 Import를 누르면 Photoshop import가 활성화 되어있다. 파일명을 확인하고 Import하면…
포토샵 그룹레이어를 그대로 가져온다.
하지만 이 경우에는 포토샵의 모든 레이어들이 비트맵 상태로 import 되기 때문에 좋긴 하지만 몇몇 인터랙션에는 제약이 있다. 앞에서 했던 고생이 헛수고가 아니라는 말이다.
다음에는 좀 더 제대로 언어를 배우는 기분이 드는 변수, 반복, 조건, 함수에 대해서 얘기해보려고 한다.
