로그인

전체 강의

부트캠프

국비

커뮤니티

블로그

이벤트

고객센터

기업 서비스

둘러보기

인텔리픽

신입 개발자 채용 공고를 한 곳에서

로그아웃

아티클

UI/UX 디자이너가 코딩을 배우면 좋은 이유 5가지

조회수 7823·7분 분량

2022. 2. 11.

꾸준히 디자이너 커뮤니티에서 논쟁이 되는 주제가 있습니다. 'UI/UX 디자이너는 코딩을 꼭 배워야 하는가?'인데요. '개발자와 긴밀히 협업을 해야 하기 때문에 UI/UX 디자이너는 코딩을 어느 정도 할 줄 알아야 한다.'와 '코딩을 배울 시간에 디자인 공부를 더 해서 최적의 UX를 제공하는 디자인을 구현하는 것이 중요하다.', 이렇게 크게 두 가지 의견으로 갈립니다.

developer-tools — HTML, CSS, JavaScript를 확인할 수 있는 '개발자도구'

UI/UX 디자이너에게 요구하는 코딩은 HTML, CSS, JavaScript 등 웹 개발 중 프론트엔드 영역입니다. 이는 웹 퍼블리셔의 업무로 분류할 수 있는데요. 단순히 '주변에서 해야 한다고 하니까', '회사들의 요구가 점점 더 많아지니까'와 같은 말들은 그들이 코딩을 배워야 하는 이유를 명확히 설명해주지 못합니다.

이번 시간에는 UI/UX 디자이너가 코딩을 배우면 좋은 이유를 이야기해 볼 건데요. 먼저 그 이유들을 나열해 보면, 1) 개발자와 원활히 협업할 수 있고, 2) 디자이너로서 나만의 무기를 갖출 수 있으며, 3) 전반적으로 업무 효율을 높일 수 있고, 4) 디자인 너머까지 사고를 확장할 수 있고, 5) 취업 시장에서 경쟁력을 갖출 수 있습니다.

위 다섯 가지를 차근차근 알아보고, 디자이너가 어떻게 처음 코딩 공부를 시작해야 하는지도 알려 드릴게요.

1. 개발자의 언어로 그들을 설득하고, 이해시키다.

웹이나 앱 애플리케이션을 다 디자인한 후 개발자에게 넘겼는데, “이건 안 돼요."라는 말, 들으신 적 있나요?

book-about-developer-says-no-today — 여러분의 회사는 어떠한가요?

『오늘도 개발자가 안 된다고 말했다』라는 책이 있을 정도로, 여러분의 요구를 개발자가 거절하는 일은 현실에서 꽤 접하는 일입니다. 여러분의 결과물이 마음에 들지 않거나, 여러분과 사이가 좋지 않아 '안 된다'라고 말하는 것은 아닐 거예요. 개발자가 거절하는 이유는 웹/앱 애플리케이션의 화면을 구현하는 일 외에도 다양한 업무를 수행하기 때문입니다.

서비스가 출시된 이후에 일어나서는 안 될 일은 무엇일까요? 바로 '에러가 발생하는 일'입니다. 개발자는 콘솔 창에 뜨는 오류를 없애는 디버깅부터 사용자에게 보이지 않는 백엔드 개발, 효율적으로 프로그래밍을 하는 일까지. 원활히 기능이 구현되는 데에 중점을 두어 업무를 수행합니다. 이 말인즉슨 디자이너에게는 중요도가 높은 업무가, 그들의 우선순위에서는 비교적 낮은 업무가 될 수 있다는 뜻입니다.

a-developer-says-no — 개발자 曰 : "그건 1순위가 아닙니다."

여러분에게 중요도가 높은 일이 빠르게 개발되려면 개발자를 설득해야 합니다. 개발자의 언어인 코딩을 어느 정도 알고 있다면, 그들을 보다 쉽게 설득할 수 있겠죠. 우선, 거절당한 일이 정말 안 되는 것인지, 구현하는 데 공수가 많이 드는 것인지를 이해하고, 이를 대체할 수 있는 방안을 새로이 제시할 수 있습니다.

apple-watch-design — 애플워치 by Jakub Antalik

또한 코딩을 할 줄 안다면 개발자에게 여러분이 구현하고 싶은 인터랙션 디자인을 명확히 설명할 수 있습니다. 여러분의 생각과 다른 결과물이 나올 때가 종종 있을 텐데요. 그러면 여러분은 부랴부랴 레퍼런스를 찾아 개발자에게 다시 처음부터 설명해야 합니다. 만약 처음부터 특정 코드값을 언급하며 전달한다면요? 개발자와의 싱크가 훨씬 잘 맞겠죠.

UI/UX 디자이너로서 코딩을 안다는 것은 개발자와 원활히 소통하고, 협업할 수 있는 역량을 기르는 것입니다. 개발자만큼 코딩을 공부하라는 뜻은 전혀 아닙니다. 여러분의 업무와 맞닿아 있는 프론트엔드의 기본만 알고 계셔도 충분합니다. 코딩을 공부하면 개발자의 관점을 이해할 수 있고, 그들의 언어로 더 쉽게 설득할 수 있습니다.

온라인 코딩 부트캠프 항해99에서는 개발자와 6주간 협업하며 실제 사용자까지 받아보는 서비스를 제작해 보실 수 있습니다. 다양한 프로젝트들이 디자이너 여러분을 기다리고 있습니다. 제대로 된 프로젝트를 경험하며 경쟁력 있는 포트폴리오를 준비하고 싶으시다면, 혹은 개발자와 긴밀하게 협업하는 경험을 해 보고 싶다면 지원해 보는 것을 추천드려요.

2. 나의 아이디어를 그대로 시각적으로 구현하다.

프론트엔드는 크게 HTML(Hyper Text Markup Language), CSS(Cascading Style Sheets), 그리고 JavaScript로 나뉩니다. HTML은 웹페이지를 구성하는 뼈대입니다. 그 뼈대에 살을 붙이고, 꾸미는 게 CSS입니다. 여기까지 웹사이트는 정적인 화면인데요. 동적인 기능들은 JavaScript를 통해 구현하면 됩니다.

html-css-js — 프론트엔드는 크게 HTML, CSS, JavaScript로 나눌 수 있습니다.

디자이너는 프론트엔드 분야만 공부해도 충분히 개발자와 소통할 수 있습니다. 그럼에도 개발자를 설득하지 못하는 경우가 발생합니다. 개발자가 판단했을 때 여러분이 제시한 디자인이 개발적으로 비효율적일 때 우선순위가 낮다고 판단되어 그러한데요. 코딩에 능숙해지면 여러분이 원하는 반응형 사이트를 직접 구현할 수도 있습니다.

responsive-web-design — 출처 : dribbble(https://dribbble.com/SQUARESPACE)

여러분이 직접 반응형 사이트를 만들 수 있게 되면 여러 가지 장점이 동반됩니다. 우선, 여러분의 머릿속에서는 다 그려지는, 하지만 말로는 다 충분히 표현하기 힘든 동적 인터랙션을 설명하기 위해 시간과 노력을 쏟지 않아도 됩니다. 그것을 표현하는 코드만 구글링을 통해 찾을 수 있다면요. 실제로 개발자의 이해를 돕기 위해 자료를 찾고, 설명을 준비하는 시간이 적지 않게 드는데, 그 시간을 획기적으로 단축시킬 수 있다면 코딩 공부에 투자하는 것은 좋은 선택일지도 모릅니다.

둘째, 이전에는 포기하기도 했던 풍부한 시각적 표현을 할 수 있습니다. 앞서 이야기했듯이 개발자에게 미적 구현은 우선순위가 낮은 업무입니다. JavaScript를 익혀 동적 기능을 구현할 수만 있다면, 여러분이 원하는 디자인이 반영되기만을 더 이상 기다리지 않아도 됩니다.

셋째, 빠르게 변화하는 트렌드를 여러분의 웹사이트에 빠르게 적용해 볼 수 있습니다. 디자이너는 진보의 영역에서 일하는 직업이라고 생각합니다. 트렌드가 빠르게 바뀌고, 그 변화에 빠르게 적응해야 하는 직업 중 하나가 바로 디자이너이죠. 특히 IT 산업에 종사하고 있다면, 그 변화의 속도는 가늠하기도 힘들 정도일 겁니다. 여러분이 웹 개발을 어느 정도 하실 수 있다면, 디테일을 빠르게 잡고, 새로운 기능을 위한 디자인도 제시할 수 있게 됩니다.

3. 코딩 하나로 일잘러 디자이너로 거듭나다.

코딩을 알고, 개발 과정을 이해하고 있으면 확실히 업무 효율이 높아집니다. 여러분이 원하는 기능의 개발 가능 여부 확인부터 개발자에게 hand-off 한 후 기다리는 시간까지, 이전에는 개발자를 거치는 게 당연했던 과정과 시간이 비효율적으로 느껴질 수 있습니다. 스스로 이 디자인은 개발자에게도 우선순위가 높은 일인지를 판단할 수 있고, 디자인 이미지를 전달할 때 코드를 함께 전달한다면 업무의 효율을 극대화할 수 있습니다.

effectiveness-efficiency-productivity — 단순히 바쁘게 일하지 말고, 생산성을 높이는 방향으로 일하셔야 합니다.

UI/UX 디자인의 본질은 서비스의 사용자를 고려하는 것입니다. 코딩을 이해함으로써 확보된 시간을 업무의 본질에 사용한다면 일이 가져오는 효과도 커지게 됩니다.

업무의 효율이 상승하고, 일이 가져오는 효과가 커진다는 것은 업무 생산성이 증가한다는 뜻입니다. 단순히 해야 하는 일이 많아 시간에 쫓기지 마시고, 어떻게 생산성을 높일 수 있을지를 고민하며 업무에 집중할 수 있어야 합니다. 코딩을 배우면 업무 생산성이 확실히 증가함을 느끼실 수 있을 거예요.

4. 디자인 너머, 그 이상을 생각하다.

UI/UX 디자이너는 사용자의 편의를 고려하고, 그들이 제품이나 서비스로부터 문제를 잘 해결할 수 있도록 최적의 경험을 제공할 수 있는 디자인을 합니다. 하지만 너무 디자인에 매몰되어 생각하다 보면, 본질을 놓치는 경우가 발생하기도 합니다.

thinking-above-design — 디자인 너머, 그 이상을 생각해야 합니다.

지금까지 반복해서 이야기했기 때문에 쉽게 이해하실 것 같은데요. 코딩을 안다는 것은 개발자의 언어를 배운다는 것이고, 그들과 원활히 협업할 수 있다는 뜻입니다. 더 나아가 웹/앱 애플리케이션이 작동하는 법을 알기 때문에 어떻게 고객에게 접근하는지, 그들이 어떻게 사용하는지도 쉽게 예상할 수 있습니다.

즉 디자이너가 프론트엔드 기술을 익히면, 디자인 너머까지 시야를 확장할 수 있습니다. 작업을 보다 객관적으로 바라보기 때문에 개발자도 쉽게 수용할 수 있는, 설득력 있는 대안을 제시할 수 있게 됩니다.

developer-says-yes — 개발자 曰 : "말이 되네요, 저도 바로 진행할게요!"

다른 팀과 협업할 수 있는 커뮤니케이션 능력, 그리고 다양한 프로젝트를 진행할 수 있는 능력을 갖춘 디자이너를 어느 누가 마다할까요? 디자인적으로도 충분히 문제를 바라보고, 다른 팀원들과 소통할 수 있겠지만, 다각도로 UI 디자인이 사용자에게 미치는 영향을 분석할 수 있다면 더 많은 일을 수행할 수 있는 디자이너로 인정받을 수 있을 겁니다.

코드는 여러분 앞에 주어진 업무를 더 잘 수행하기 위한 또 하나의 도구로 역할을 톡톡히 할 거예요. 어떤 디자인이 UX를 더 고려한 디자인인지, 그리고 다른 팀원들도 인정할 만한 중요한 업무인지, 여러분이 많이 이해하고 있을수록 설득력을 갖춘 사람으로 성장할 수 있습니다.

5. 디자이너 취업 시장에서 우위를 점하다.

you-are-the-best — 우대사항 : 코딩을 이해하고 있으면 좋겠어요. (...!)

코딩을 할 줄 아는 디자이너는 취업 시장에서 경쟁력을 갖춘 인재입니다. 디자이너 웹 퍼블리셔로, 혹은 개발자로 커리어를 전환하는 것을 말하는 게 아니고요, 디자이너 풀에서도 확실히 우위를 선점할 수 있습니다. 특히 웹서비스를 만드는 UI/UX 디자이너는 말이죠! 모든 디자인 작업 기회에서 코딩 방법을 아는 것은 심사 프로세스와 일상 업무에서 큰 차이를 만들 수 있습니다.

wanted-designers — 타 직군, 특히 개발팀과 원활히 협업하려면 기본적인 코딩 지식은 있어야 가능 ...

실제로 UI/UX 디자이너 채용공고를 보면, 많은 기업들이 타 직군과 원활히 협업할 수 있는 디자이너를 뽑고자 하는데요. 코딩을 이해하고 있다면 쉽게 기획자나 개발자와 소통할 수 있겠죠.

단순하게 생각해 보아도, 많이 알수록 더 많은 가능성이 열립니다. 그리고 점점 더 IT 산업에 종사하는 회사들이 늘어나고 있고요. IT가 산업을 주도하는 세상에서 더 많은 취업 기회를 얻고 싶다면, 코딩을 공부해 두는 것을 추천합니다. 꼭 IT 산업이 아니더라도 많은 기업들이 디지털 전환을 시행하고 있기 때문에 코딩을 할 줄 아는 디자이너의 수요는 더 늘어날 것은 저명한 사실입니다.

아직 코딩을 한 번도 접해보지 않은 디자이너는 어떻게 코딩을 공부하면 좋을까요? 웹 개발의 전반을 훑어보며 개발 사이클을 이해하는 것을 목표로 공부하시는 것을 추천합니다. 개발자가 어떻게 웹 사이트를 기획하고, 제작하고, 배포까지 하는지, 개발 한 판을 공부하면 어떻게 디자인을 진행해야 할지 감이 오실 거예요. 그 과정에서 디자이너가 어떻게 개발자와 협업을 위해 소통해야 하는지도 이해하실 수 있습니다.

스파르타코딩클럽의 '웹개발 종합반' 강의는 개발 이론 지식을 하나하나 설명하기보다는 실전에 꼭 필요한 이론과 스킬만 중점적으로 알려드리고 있습니다. 그렇기에 5주만 바짝 따라하시면, 여러분만의 웹사이트를 만드실 수 있답니다. 저희와 함께 웹 개발을 배우며 기본기를 다진 후에는 스스로 구글링을 통해 더 퀄리티 높은 웹 서비스를 제작하실 수 있을 거예요.