프로덕트 디자이너도 코딩이 궁금하다.
먼 나라 이웃나라 개발자
스파르타 코딩 클럽을 선택하게 된 이유
인스타 광고로 나타난 스파르타 코딩 클럽. 내일 배움 카드로 수강하게 되면 완강 시 환급을 통해 100% 무료로 강의를 들을 수 있다는데... 현혹되었다.
또 어떤 기사에서 스타르타코딩클럽 수강 완주율이 98%라는 것을 본 적이 있었다. 스파르타 코딩의 어떤 UX전략이 사용자의 완주율을 높이는 것인지 경험하고 싶었다.
코딩을 배워보고 싶었던 이유
1. 회사에서 Figma(피그마)로 디자인하며 웹 프런트엔드, iOS, Android 개발자랑 협업을 하며, 개발자들의 언어를 좀 더 잘 이해하고 싶은 마음
2. 개발자들이 바쁠 때 수정 같은 것은 내가 대신해줄 수도 있지 않을까?
3. 새로운 적성을 발견할 수 있지 않을까 하는 기대감
즉, 업무와의 연관성 + 호기심 때문에 강의를 수강하게 되었다.
1주 차 강의 결과물 & 느낀점
위 이미지는 과제로 만든 결과물이다. 계속 이전 강의를 되돌아보며 만들었다.
위 과제를 부트스트랩을 이용해 구현하면서 느낀점은 디자이너가 디자인 시스템을 라이브러리 화해서 사용하는 것과 같이 개발자들도 비슷한 방식으로 개발하겠구나 생각했다.
프로덕트 디자인을 하다 보니 HTML, CSS 같은 경우는 컴포넌트 명이 익숙해서 이해도가 빨라 재밌었다. 심지어 내가 코드를 입력하는 대로 시각물이 바로바로 보이는 부분이 흥미로웠다.
javascript 기초를 들어가면서 let, if 등등 인과관계를 알 수 없는 낯선 것들이 등장하면서 조금 난이도가 올라갔지만 그래도 '영어단어'를 이용한 것이라 이해는 갔다.
HTML&CSS, Javascript, JQuery까진 괜찮았다.
JQuery를 배웠다. 여기까진 그래도 익숙해지다 보면 할만해지겠지라고 생각했다.
JQuery란?
- 전문 개발자들이 짜둔 Javascript 코드이다.
- 남이 짜둔 CSS = 부트스트랩을 이용했던 것과 같은 맥락이다.
- 쓰기 전에 "import"를 해서 사용해야 한다.
ajax는 한 번의 수업으로는 이해할 수 없었다.
ajax는 어떤 데이터 API를 가져와서 서버에서 준 결과를 Response 하는 것인데, 무작정 통상적으로 이렇게 사용한다. 하며 외우라고 하니 잘 이해가 안 됐다.
특히 let i = 0; i < mise_list.lenth; i++
문자열을 보고 한 번에 이해되지 않아 정말 새로운 언어를 배우는 느낌이 들었다. 내 머리는 고장이 났다.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});
이후에 마지막 퀴즈는 환율 API를 가져와 새로고침을 하면 환율이 변경되도록 구현하는 퀴즈가 있었다.
아무리 머리를 써도 도대체 어떤 코드를 입력해야 하는지 몰라서 문제 답안을 보고 똑같이 수기로 입력했는데 안됐다. 하지만 문제 답안을 복사 붙여 넣기 하니까 작동했다(?)...(컴퓨터는 정직하니까 제가 잘못한 거겠지요) ajax는 아무래도 초보자에겐 꽤 난도가 높아 여러 번 반복하면서 들으면 언젠가는 이해하지 않을까 싶다.
회사 개발자한테 자랑하기
프론트엔드 개발자 동료에게 코딩을 배운다면서 슬쩍 자랑했다. 회사에 개발자 선생님들이 많아서 든든한 느낌이다. (우리 회사에 프론트엔드가 안 뽑히고 있다던데 이참에 내가..?)
개발 디자인 리뷰를 하며 변경 사항을 문서화할 때 좀 더 개발자가 이해하기 쉽게 용어를 사용해서 소통할 수 있게 됐다. 이전에는 "여기 여백이.." 이런 식이었다면, 지금은 "Padding-bottom은 16px로 변경해주세요"라고 할 수 있다. 머릿속으로 이 사람이 어떻게 표현해야 알아들을 수 있을까 하는 고민이 줄었다.
피그마는 개발과 비슷한 점이 많은 툴이라고 느꼈다. 수강 이후 자연스럽게 개발 구조를 좀 더 고려한 디자인을 피그마에 반영하고 있다. 아무래도 밀접하게 소통하는 직군이 개발자이다 보니 개발 구조에 대한 이해를 디자이너가 할 수 있다면, 커뮤니케이션 비용이 줄 수 있다고 생각한다. 또 직접 코드를 짜거나 그런 것이 아니기 때문에 개발을 이해만 할 수 있어도 디자이너에게 큰 도움이 되는 것 같다.
UXUI, 프로덕트 디자이너의 코딩 겉핥기 매우 추천하는 바이다!
