먹고 살기도 바쁜데, 코딩은 무슨 코딩 ?

A 하기도 바쁜데 B는 무슨 B ?

Junhyuk Jang
hyuk
9 min readJun 23, 2016

--

아마도 우리는 늘 그랬던 것 같아요.

공부 하기도 바쁜데 연애는 무슨 연애 ?
놀기도 바쁜데 학점은 무슨 학점 ?
회사 다니기도 바쁜데 결혼은 무슨 결혼 ?

많은 분들이 이런 생각을 했거나, 혹은 지금도 하고 있을 것 같아요. 그런데 정말 그런가요? 연애, 학점, 결혼… 누군가는 하더라구요. 아마 “코딩” 도 마찬가지일 것 같아요. 누군가는 하겠죠. 그래도 저는 아니었어요. 왜냐하면 저는 UX 디자이너니까요.

저는 그저 퍼소나를 설정하고, 저니맵을 그리고, 리서치를 통해서 인사이트를 도출하면 되는 것이었어요. 조금 더 나아가면 와이어프레임을 그리고, 동선 시나리오를 완성하면 되는 것이었죠. 그렇게 제 할 일을 하고 나면 다들 “오~” 하면서 인정해 주었거든요.

이 정도면 나쁘지 않았어요. 아니 오히려 좋았다고 할 수 있어요. 제가 하는 일이 정말 좋았고, 만족스러웠어요.

서서히 혹은 갑자기 변하는 상황들

2011년, 애플의 CEO 스티브 잡스가 안타깝게도 세상을 떠났고 상황이 서서히 달라지는 것 같았어요. 비전을 제시하고, 그것을 대중화 시키며, 특히 UX에 대한 중요성을 계속해서 상기시켜주던 인물이 사라진 이후, 제 스스로도 UX라는 분야에 대해 의구심을 품게 되더라구요.

‘내가 잘하고 있나?’, ‘제대로 하고 있나? 하는 생각이 자주 들었죠.

self
시간과 자기 효능감의 상관 관계. “그래도 웃고 있어요”

사람들이 저에게 “너는 뭐하는 사람이니?” 라고 물어볼 때, 저는 또 예전과 같이 대답했어요. 인사이트를 도출하고, 설계문서를 그린다고 말이죠. “오~” 하는 대답을 기대했지만, 이제는 달랐어요. “그래서??” 라는 반문이 돌아오더라구요.

이미 UX는 익숙한 개념이 되어버렸지만, 여전히 그 역할이 애매했어요. 사람들은 UX 디자이너에게 좀 더 확실하고 날카로운 무언가를 바라는 듯 했어요.

그리고 달라진 것은 또 있었어요. 식구가 늘어났어요. 딸이 태어나면서 가장으로서 책임감이 커지더라구요. 길게 일하고 싶었고, 업계에 오래 남아있고 싶었어요. 그러기 위해선, 나만의 무기가 필요한 상황이었죠.

thor
토르의 망치와 캡틴의 방패 !!

그 무렵 아내는 저에게 이런 말을 해 주었어요.

IT 업계에서 일하면서, 그 근본이 되는 코드를 몰라도 괜찮겠어요?

영어나, 일본어나, 코드나 다 언어잖아요. 외국어 하나 익힌다고 생각해요 ^^

그전까지 코드라고 하면 무언가 복잡하고 심오한, 대단히 어려운 개념으로만 막연히 생각하고 있었는데, 사람들이 하는 말과 마찬가지라고 생각하다니.. 정말 신선한 접근이었어요.

결국 저는 그 말에 용기를 얻어 코드의 세계에 한발짝 다가서게 되었죠.

code
UX 커리어 개발 단계 이론 a.k.a. 압박 단계 이론

코딩을 시작하는 디자이너를 위한 안내서

1. 우리는 개발자가 아니잖아요.

코딩을 배우고 싶다는 물음에 각각 다른 플랫폼의 언어를 사용하는 두 개발자는 상반된 답변을 내놓았어요. iOS 개발자는 swift가 초보자에게 적합한 언어라고 추천해 주었고, Android 개발자는 java를 공부하면 앞으로도 계속 먹고 살 걱정이 없다고 했죠.

저는 금방 솔깃해져서 둘 다 기웃거려 보았어요. 하지만 기초 지식이 부족했던 저에게 두 언어 모두 너무 어려운 것 같았어요.

dev
그렇지만 저는 둘다 어려워요..

그러던 와중에 초보자가 접근하기 쉬운 스크립트 기반의 도구-FramerJS-를 알게 되었어요. 회사에서 지원을 받을 수도 있었지만, 라이센스는 자비로 결제했어요. 돈이 아까워서라도 한 번은 더 보겠지 생각했었거든요. (정말 그렇게 되더라구요^^)

2. 쉬운 것, 재미있는 것

처음에는 사각형 레이어를 만들어 보는 것으로 시작했고, 그 다음은 레이어를 겹쳐서 아이콘을 만들어 보았어요. 아이콘을 만들면서 알게 된 지식으로 인터페이스를 만들 수 있었죠.

일단 쉽고 재미있는 것부터 하는 것이 중요한 것 같아요. 저는 특히 아이콘 애니메이션을 만들어 보는 것이 재미있었어요. 재미는 지속성을 갖게 하는 가장 큰 원동력이라고 생각해요.

icons
지금도 계속 만들고 있어요~

3. 낙서하듯이

클린 코드라고 부르는 깔끔하고 잘 정리된 코드보다는 빠르게 슥슥 코드를 적어나가는 것이 초반에는 더욱 필요한 것 같아요. 처음부터 깔끔한 코드를 신경쓰다 보면 시간도 오래 걸리고, 재미도 덜 할 거예요.

아마 조금씩 하다 보면 끝을 모르고 길어지는 코드, 같은 작업의 반복, 갈피를 잡기 어려운 수정 작업 등에 직면하게 될 거예요. 그 순간 더 편하게 하는 방법을 찾아보기로 마음 먹는다면, 그렇게 또 한 단계 성장하게 되는거죠.

처음에는 이렇게, animate, animate, animate..
처음에는 이렇게, animate, animate, animate..

4. 복붙도 괜찮아요.

디자인 작업을 하다 보면 “복사/붙여넣기”를 자주 하게 되죠. 하지만 그것이 결코 나쁘지만은 않은 것 같아요. 코딩을 할 때에도 많이 보고, 많이 가져다 쓰는게 필요할 거예요.

찾아보면 정말 많은 리소스들이 있어요. 그것들을 그냥 한번 복사해서 붙여보는 거예요. 그렇게 하다보면 이게 어떻게 만들어졌는지 차츰 알게 되고, 이 부분을 바꿔보면 어떻게 될까 궁금하기도 하고, 그렇게 그 코드가 내 것이 되는거죠.

온전히 내 것이 된 코드들은 한 곳에 모아두고 필요할 때 또 다시 붙여쓸 수 있어요. 복붙을 반복하다보면 어느샌가 코딩에 대한 감을 잡아나가는 자신을 발견할 수 있어요.

dribbble
복붙복붙, 없으면 또 찾아서 복붙복붙~

5. 일단 손이 먼저 움직여야

실제로 구현하기 위해서는 인터랙션을 단위별로 쪼개보는 노력이 필요해요. 간단한 인터랙션도 몇 개의 단위 액션들이 모여서 이루어진 것이기 때문에, 각 단위별로 정리해두지 않으면 헷갈릴 수 있어요.

코딩에 바로 돌입하기 보다는 우선 원하는 움직임을 스케치 해보고, 조건들을 정리해 보는 거예요. 차근차근 정리한 후에 하나씩 코드로 바꿔보고, 제대로 동작하지 않으면 역순으로 하나씩 주석 처리를 해요.

그러면 처음의 실수를 조금씩 줄여나갈 수 있어요.

줌인 - 드래그 - 줌아웃
줌인 — 드래그 — 줌아웃

6. 온라인 커뮤니티를 활용해요.

구글링도 좋지만 같은 관심사를 가진 사람들끼리 모여있는 공간을 찾는 것도 좋아요. 자주 쓰는 툴이나 언어를 검색해보면, 이미 수많은 커뮤니티가 개설되어 있는 것을 확인할 수 있어요. 궁금증을 해결하기에 직접 물어보는 것보다 좋은 것은 없죠.

그래서 ?

1. 의성어/의태어가 줄었어요.

그 전에는 인터랙션을 설명하기 위해서 언어의 마술사가 되어야 했어요. 하지만 이제는 직접 보여줄 수 있게 되었어요. 원하는 인터랙션을 오해없이 정확하게 전달할 수 있다는 것이 큰 장점인 것 같아요.

여기서 탁! 걸리고, 슈욱~ 커져요.
여기서 탁! 걸리고, 슈욱~ 커져요.

2. 개발자의 관심을 유도해요.

코드로 구현한 인터랙션을 개발자에게 보여주면 문서만 전달할 때보다 훨씬 적극적으로 피드백을 준다는 느낌이 있었어요. 되는 것과 안되는 것을 잘 설명해주고, 되는 방향으로 일이 진행되는 것을 체감할 수 있었어요.

dev2
땀과 눈물의 결실 ㅠ_ㅠ

3. 개발자를 이해하기 시작해요.

예전에는 개발자들에게 안된다는 말을 참 많이 들었어요. 왜 그런지 이유를 설명해주기는 하는데, 무슨 말인지 알수도 없었죠.

그런데 지금 생각해보면, 기술적으로 말도 안되는 내용들을 제안하기도 했었고, 다른 곳에서 공통으로 쓰고 있는 라이브러리를 건드리는 내용들을 제안하기도 했었어요.

기술에 대해서 조금씩 알아가면서, 개발자가 하는 말도 약간 알아듣게 되고, 안되는 것 말고 되는 내용들을 이야기 할 수 있게 되었어요.

dev3
되면 한다 !!

4. 사용성 테스트에도 활용해요.

페이지 뷰, 클릭 수 등 사용자의 데이터를 수집하기 위해서는 프론트 개발자의 도움이 필요했어요. 그러다보니 일정이 늦춰지기도 하고, 원하는 데이터를 얻지 못하는 경우도 있었어요.

하지만 이제는 웹으로 구현한 프로토타입에 코드를 직접 삽입해서 테스트에 활용할 수 있게 되었어요.

클릭 히트맵 - Hotjar.com
클릭 히트맵 — Hotjar.com
녹화 영상 - Hotjar.com
녹화 영상 — Hotjar.com

5. Like it

이게 가장 중요해요. 내가 구현한 인터랙션을 여러 곳에 공유해보면, 의외로 많은 사람들이 관심을 가져주고 좋아해 주는 것을 경험할 수 있었어요.

like가 1씩 올라갈 때마다, 왠지 자존감도 조금씩 올라가는 것 같았어요. 그럴수록 더 멋진 인터랙션을 구현해보고 싶은 욕심이 생기고, 더 고급 기술들을 공부해보고 싶은 마음이 생겼어요.

like
우리는 모두 알고 있어요. 짜릿한 이 느낌 ^^

TURNING POINT

코딩을 배운 건, 제 인생에 있어서 터닝 포인트가 되었어요. 생각해 보면 이전에 겪었던 몇 번의 터닝 포인트들은,

공부 하기도 바쁜데 연애는 무슨 연애 ?
놀기도 바쁜데 학점은 무슨 학점 ?
회사 다니기도 바쁜데 결혼은 무슨 결혼 ?

이런 질문들을 무시할 때였던 것 같아요. 이제는 이 질문도 무시하기로 했어요.

먹고 살기도 바쁜데 코딩은 무슨 코딩 ?

또 남은 것들이 있겠죠. 아마 앞으로도 계속 더 생길거예요.

A 하기도 바쁜데, B는 무슨 B ?

하지만 이제는 A와 B에 무엇이 들어가든지 무시해 보려고 해요. UX 디자이너로서, IT 업계 종사자로서, 남편이자 아빠로서, 그리고 무엇보다 나 자신으로서, 그게 만족스러운 삶을 살아가는 방식일거라고 믿어요.

2016.06.03 네이버 D2 스타트업 팩토리에서 진행했던 “IxD Meetup Seoul: ㅋㄷ 코딩하는 디자이너”의 발표자료를 글로 옮긴 것입니다.

--

--