디자이너가 코딩에 대해 알아야 할 사항 (What designers actually need to know about coding)

이 글은 Amy RogersWhat designers actually need to know about coding글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

우리는 현재 디자이너들이 유니콘이 되도록 압력을 가하는 시대에 살고 있습니다. 팟캐스트를 시작합니다. 그것이 무엇이든 "생각하는 리더"가 되세요. 포화상태에 이른 시장에서 두각을 나타내기 위해 디자이너들의 기술력은 더욱 넓어질 것으로 기대됩니다. 가장 인기 있는 재능 중 하나는 코딩입니다.
가장 좋은 징조는 구글에 "should designers"를 입력했을 때 일어나는 일입니다. 이 6개의 히트된 것들은 디자이너들이 코드를 배워야 하는지 여부를 물어봅니다. 이런 부분에 대해서 걱정하는 분들이 많은 것은 분명합니다.
presentation
디자이너들은 개발자가 되는 것에 관심이 없기 때문에 코드를 쓰는 법을 배우지 못합니다. 물론 두 직업 사이에는 겹치는 부분이 있지만, 다른 직업을 잘하기 위해 하나를 연습할 필요는 없습니다.
코드화할 수 있는 디자이너로서, 저는 항상 누구에게든 코딩을 추천할 것입니다. 하지만 디자이너들이 오늘날 시장에서 성공하기 위해 실제로 알아야 할 것을 둘러싸고 많은 잘못된 의사소통이 있습니다.
훌륭한 디지털 디자이너가 되기 위해 코드를 쓸 필요가 없습니다. 하지만 여러분은 디지털 제품이 어떻게 태어나고 유지되는지에 대한 기본을 이해할 필요가 있습니다. 예술가들은 다양한 색을 얻기 위해 물감을 섞는 방법을 알고 있습니다. 요리사들은 요리의 맛을 바꾸기 위해 어떤 향신료를 첨가해야 하는지 알고 있습니다. 전문직 종사자들은 자신이 작업하는 도구를 속속들이 알고 있으며 디지털 방식으로 작업하는 디자이너들도 이와 다르지 않아야 합니다.

우리에게 "코드"는 무엇을 의미합니까?

"개발자"의 같은 브러시로 코디할 수 있는 모든 사람을 그리는 것은 모든 유형의 디자이너들을 하나로 묶는 것과 같습니다. 개발자들이 가질 수 있는 독특한 기술, 그들이 사용하는 도구, 그리고 그들이 모범 사례라고 믿는 것들이 매우 다양합니다.
개발자의 역할(및 디자이너로서 귀사가 어떻게 더 가치가 있을 수 있는지)을 시작하기 전에 개발자가 일하는 세상을 알아야 합니다.

화면 뒤에서 무슨 일이 일어나고 있습니까?

우리의 디자인이 승인되는 것과 개발자들이 우리에게 최종 제품을 보여주는 것 사이에는 많은 과정이 있습니다. 설계를 구축하려면 개발자가 부품을 분해하여 다시 조립하는 방법을 이해해야 합니다. 그들은 우리에게 다른 방식으로 생각합니다. 그렇다고 해서 그들과 소통할 수 없다는 뜻은 아닙니다.
모든 것을 모르고 지금까지 살아왔어요. 저는 아직도 기술의 세계에 대해 모르는 것이 너무 많고, 절대로 모든 것을 배우지 못할 것입니다. 단순하게 하기 위해서, 저는 저와 붙어있고 가장 유용했던 부분들을 살펴보도록 하겠습니다. 이는 다음과 같은 세 가지로 요약됩니다.
  1. 인터페이스가 구축되는 방식입니다.
  2. 사용자가 버튼을 누르면 어떻게 됩니까?
  3. 인터페이스에 입력하는 정보의 출처는 다음과 같습니다.

시스템의 구성 요소입니다.

우리가 웹을 검색할 때, 인터넷을 통해 지구상의 기기들 사이에는 많은 앞뒤가 있습니다. 전 세계 여러 나라에 있는 수백 대의 서버에서 데이터를 보관하고 있습니다. 초당 테라바이트의 데이터를 전송하는 거대한 케이블은 수천 마일에 걸쳐 있습니다. 상층 대기의 토우 및 위성은 몇 초 만에 지구 전체로 데이터를 전송합니다.
하지만 우리가 보는 것은 화면에 나오는 것들 뿐입니다. 그리고 그것은 괜찮습니다.
디자이너로서, 우리는 엔지니어가 아니기 때문에 이러한 연결이 어떻게 발생하는지에 대해 걱정할 필요가 없습니다. 단지 시기적절하고 쾌적한 방식으로 사용자에게 정확한 결과를 제공하는 것이 중요합니다.
presentation
디지털 디자이너로 일하면서 저는 다음과 같은 지식을 가지고 살아왔습니다.
  • 인터페이스는 우리가 디자인하는 영역입니다. 버튼의 위치, 사용할 색상, 요소가 사용자 입력과 반응하는 방식 등이 있습니다. 이러한 규칙과 선택은 우리 것입니다. 우리가 우리의 디자인을 개발자들에게 넘겨주면, 그들은 이러한 시각 자료를 코드로 변환합니다.
  • 인터페이스가 구축되어 클라이언트를 통해 최종 사용자에게 표시됩니다. 우리는 보통 이것을 개인용 기계의 우산 용어로 사용합니다. 전화기, 노트북, 태블릿 같은 것들이죠. 이 장치들은 몇 가지 기본적인 것들을 할 수 있을 정도로 강력하지만, 과부하가 걸리면 고군분투할 것입니다. 그들은 또한 스스로 많은 것을 할 수 없습니다. 전화기의 비행기 모드를 켜서 그것이 얼마나 쓸모없게 되었는지 확인해 보세요.
  • 클라이언트가 무언가를 필요로 할 때 클라이언트가 없는 경우 서버에 전화를 합니다. 서버를 제품 뒤의 두뇌라고 생각하세요. 크고 강력한 기계로 크고 복잡한 공정을 처리할 수 있습니다. 클라이언트 장치는 데이터를 액세스하기 위해 인터넷을 통해 서버와 원격으로 통신합니다. 또한 서버는 클라이언트 시스템이 수행할 수 있는 것보다 훨씬 더 빠르게 복잡한 작업을 수행할 수 있습니다.
  • 클라이언트와 서버 간에 데이터를 전송하려면 인터넷을 사용해야 합니다. 이 시스템 네트워크(당신의 네트워크 포함)는 전 세계에 걸쳐 있으며, 이를 통해 전세계적인 규모의 머신 간에 신속한 데이터 전송이 가능합니다.

기술 스택입니다.

누군가가 제품의 "스택-stack"을 언급할 때, 그들은 제품이 작동하도록 만드는 데 필요한 도구와 서비스에 대해 이야기합니다. 크고 복잡한 생태계입니다. 회사 전반에 걸쳐 여러 계층의 스차타택에서 작업하는 다른 직원이 있지만, 모두 한 층씩 동일한 제품을 작업하기 위해 모입니다.
소프트웨어 길드-The Software Guild가 발견한 한 가지 놀라운 비유는 기술 스택을 햄버거로 생각하는 것입니다. 버거가 버거가 되려면 몇 가지 기본적인 구성품이 필요하지만, 취향에 맞게 샌드위치를 만들기 위해 층을 바꾸면 됩니다. 한 개발자가 패티를 책임지고 다른 개발자가 치즈를 책임질 수도 있습니다. 제품의 버거에는 양파가 들어 있을 수도 있고 없을 수도 있습니다.
설계 팀의 스택에는 여러 가지 다른 구성 요소가 포함될 수 있습니다. Sketch, Framer X, Zeplin, Abstract, Adobe Illustrator, Origami를 예로 들어 보겠습니다. Sketch를 Figma와 같은 대체 도구와 바꿀 수 있습니다. 또는 Adobe XD에 추가하여 다른 디자이너의 스킬 세트를 활용합니다.

다양한 종류의 개발자들이 있습니다.

이와 같은 시스템을 유지하려면 다양한 재능을 가진 사람들이 필요합니다. 대부분의 개발자는 시스템의 단일 구성요소에서 작업하는 것이 가장 편하고, 모든 제목과 역할을 부여합니다.
디자이너의 관점에서 볼 때 일상적인 운영에서 만날 수 있는 개발자는 몇 가지에 불과합니다.

프런트 엔드 개발자입니다.

우리 모두는 적어도 한 명의 프런트 엔드 개발자와 함께 일하고 있습니다. 이 제품들은 프런트 엔드 기술을 사용하여 클라이언트 측에서 우리의 디자인을 제작하는 것입니다. 그들은 우리만큼 인터페이스에 열정적이고, 다른 솔루션으로 실험을 하는 것을 좋아합니다.
웹 개발자는 웹 사이트에서 경험을 쌓고, 모바일 개발자는 모바일 앱에 대한 경험을 쌓습니다. 저마다 특기와 언어를 구사하겠지만, 둘 다 같은 목표를 추구하고 있습니다.
누군가 (디자이너로서) 코디할 수 있느냐고 물으면 보통 이 정도 수준에서 발전할 수 있을 것으로 예상하고 있습니다.

백엔드 개발자입니다.

이 직함을 가진 사람들은 시스템의 구조와 논리를 구축할 것입니다. 그들은 대개 컴퓨터 공학이나 공학 학위 소지자들이며, 강력하고 논리적인 해결책에 대한 열의를 가지고 있습니다. 인터페이스와 관련이 없는 경험의 부분은 대개 백엔드 개발자의 것입니다. 빠른 로딩 시간, 안전한 데이터 전송 및 강력한 데이터 아키텍처와 같은 기능을 제공합니다.
우리는 그들과 직접 일하지는 않지만, 그들의 작업은 우리가 디자인할 수 있는 것에 직접적인 영향을 미칠 수 있습니다.

풀 스택 개발자입니다.

시스템의 앞쪽과 뒤쪽에서 모두 작업할 수 있는 개발자입니다. 그들은 우리의 UX/UI 디자이너 역할과 비슷합니다. 좋은 것은 드물고 많은 관심을 받고 있습니다.

데이터 과학자들입니다.

디자이너는 분석을 통해 사용자의 행동을 파악할 수 있으며, 데이터 과학자는 이를 가능하게 합니다. 그들은 수학적 방법을 사용하여 많은 양의 데이터를 핵심 통찰력에 응축하는 전문가입니다.

디자이너들은 무엇을 신경써야 할까요?

여기서 거쳐야 할 정보가 많은 것으로 알고 있습니다. 나는 당신이 "내가 알아야 할 이 물건들 중 가장 적은 양이 얼마인가?"라고 묻는 것을 들었어요.
간단히 말해서, 여러분은 현재의 일하는 방식을 더 좋게 만드는 것들을 배우고 싶어합니다. 웹 상에서 무언가를 구축합니까? CSS 그리드에 대해 알아봅니다. 암호화된 데이터로 작업합니까? 공용 키와 개인 키에 대해 알아봅니다. 당신은 모든 분야의 잭이 되려고 하는 것이 아니라 그들이 일하는 환경에 적응할 수 있는 사람이 되려고 하는 것입니다.
지금까지 유용한 주요 사항 중 몇 가지가 있습니다.

HTML

개발자는 하이퍼 텍스트 마크업 언어를 사용하여 웹 페이지를 작성합니다. 이렇게 하면 페이지 구조, 어디로 가는 요소, 각 요소 내의 내용, 각 요소의 스타일을 정의할 수 있습니다.
presentation
위의 예를 보세요. 빨간색 상자는 메타데이터이며, 클라이언트와 서버가 이 웹 페이지에 대해 알아야 할 정보입니다. 오렌지 상자는 우리가 우리의 구성 요소를 정의한 곳입니다. 웹 브라우저에서 이 페이지를 로드하면 오른쪽 창처럼 보입니다.
웹을 설계하는 경우 기본 사항을 아는 것이 도움이 됩니다. 온라인에는 HMTL을 배울 수 있는 많은 무료 리소스가 있으며, Brackets과 같은 프로그램을 사용하여 자신의 시스템에서 쉽게 검색할 수 있습니다.

CSS

제품을 디자인할 때, 우리는 일관된 시각적 언어를 만듭니다. 개발자들도 마찬가지입니다. 그들은 구성요소의 시각적 특성을 제어하기 위해 Cascading Style Sheets를 사용합니다. CSS가 꺼져 있는 일부 웹 사이트를 살펴보십시오. 단순하게 보이는 콘텐츠만 표시됩니다.
presentation
이전 사례를 들어보면, 일부 CSS로 페이지를 좀 더 재즈적으로 만들기가 쉽습니다. 몇 줄의 코드를 사용하여 페이지의 요소 간에 일관된 시각적 언어를 정의할 수 있습니다.
CSS가 어떻게 작동하는지 이해하면 설계만큼 상황을 좋게 만드는 것이 얼마나 어려운지 이해할 수 있습니다. 스케치에서는 쉬운 것도 있고, 만들기에도 골치 아픈 것도 있어요.

Javascript

저는 스케치용 플러그인을 직접 구축하는 것부터 웹 기반 게임 제작에 이르기까지 다양한 용도로 Javascript를 사용해 왔습니다. Javascript는 매우 다재다능하고 쉽게 습득할 수 있는 언어입니다. 일부 백엔드 개발자는 React 및 Angular와 같은 Javascript 프레임워크를 사용하여 제품 측면을 구축하기도 합니다.
클라이언트 측의 Javascript에 대해 알아야 할 주요 사항은 수동으로 변경할 필요 없이 HTML 및 CSS의 값을 변경하는 방법입니다.
presentation
아까부터 다시 한 번 그 예를 보겠습니다. 클릭할 때 경고를 트리거하는 이벤트를 헤더에 추가했습니다. 단일 코드 행으로 페이지의 요소를 사용자 입력에 반응하도록 할 수 있습니다.
Javascript에는 많은 강좌가 있지만 HMTL과 CSS와의 관계에 대해 배우는 가장 좋은 방법은 tinker입니다. 몇 가지 예를 생략합니다. 다른 사람들의 실험을 읽고 어떻게 작동하는지 알아보세요.

모바일 앱 개발입니다.

저는 두 가지 이유로 앱 개발과 관련된 모든 것을 하나로 묶고 있습니다. 우선, 저는 이것에 대한 경험이 많지 않아서 어떠한 실질적인 조언도 할 수 없습니다. 둘째로, 경험이 없는 디자이너의 관점에서 보면, 그들은 모두 꽤 비슷합니다.
전화기가 앱에서 코드를 렌더링하는 방법은 웹과 다릅니다. 오늘날 시판되고 있는 다양한 기기 때문에 일관된 상태를 유지하는 것이 훨씬 더 어렵습니다. 또한 복잡성만 증가시키는 광범위한 사용자 작업(스위핑 및 자이로스코프 등)에 액세스할 수 있습니다.
매일 각 플랫폼에 대해 개별적으로 설계함으로써 대부분의 장애물을 극복할 수 있습니다. Android와 iOS 모두에 대한 지침은 가능한 한 빨리 배워야 합니다.

제가 알아야 할 것은 무엇입니까?

궁극적으로, 코딩은 모든 사람을 위한 것이 아닙니다. 매일 작업 흐름에서 이러한 작업에 노출되지 않으면 기억하기가 어려워집니다. 코드를 지정하지 않는 설계자는 개발자 팀원들을 위해 작업을 좀 더 쉽게 하는 방법만 이해하면 됩니다.
코드 한 줄에 손을 대지 않고도 디자이너/개발자처럼 생각할 수 있는 몇 가지 바로가기가 있습니다.

개발자에게 공감하세요.

디자이너와 개발자 모두 놀라운 제품을 제공하고 있습니다. 동기화가 많을수록 최종 결과는 더 좋아지고, 서로에게서 더 많은 것을 배울 수 있습니다. 팀을 최대한 활용하려면 몇 가지 변경 사항만 있으면 됩니다.
  • 설계 단계에 개발자를 참여시킵니다. 검토 설계, 아이디어 워크샵 실행, 사용자 테스트 결과 공유에 초대합니다. 제가 들은 가장 멋진 아이디어는 개발자들로부터 나온 것입니다.
  • 그들의 제안을 들어보세요. 개발자가 여러분의 아이디어를 실행할 수 없다고 했을 때, 그것은 그들이 그것을 좋아하지 않아서가 아닙니다. 어떤 것들은 다른 것들보다 짓기가 훨씬 어렵습니다. 이런 일이 일어날 때 긍정적으로 생각하고, 타협점을 찾기 위해 함께 노력하세요.
  • 그들의 챔피언이 되세요. 최종 디자인을 넘겨주는 것은 결코 마지막 단계가 아닙니다. 비전을 수립할 때 이를 지원하는 것은 여러분에게 달려 있습니다. 한 가지 작은 것을 바꾸는 것이 그들의 삶을 더 쉽게 만들 수 있다면, 왜 그렇게 하지 않을까요?

몇 가지 다른 도구를 사용해 보십시오.

일반적으로 디지털 제품 개발은 "끌어서 놓기" 워크플로우만큼 쉽지 않습니다. 코딩할 때 손이 키보드에 고정되는 이유가 있습니다. 타이핑을 통해 모든 것을 만들 수 있습니다.
NAT의 작업 방식과 개발자의 작업 방식 사이에 선을 긋는 몇 가지 툴은 다음과 같습니다.
  • 웹플로우입니다. 이 온라인 도구를 사용하면 직접 작성하는 방법을 몰라도 설계를 라이브 HTML 페이지로 작성할 수 있습니다. 미리 만들어진 구성 요소를 사용하여 사이트를 구축하고 원하는 대로 스타일을 지정할 수 있습니다. 이 도구를 사용하면 CSS 스타일 및 구성 요소의 작동 방식을 파악할 수 있습니다.
  • Origami죠 Facebook의 팀이 개발한 시제품 제작 도구입니다. Sketch와 완벽하게 통합되지만, 인터페이스에 대한 생각을 변경하기 때문에 권장하는 주된 이유는 Sketch가 인터페이스에 대한 생각을 변경하기 때문입니다. 설계가 아니라 구성요소의 계층으로 볼 수 있습니다.
  • Framer. 구조와 코드에 대한 이해에 의존하는 또 다른 프로토타이핑 도구입니다. 익숙해지는 데 다소 시간이 걸리지만 디자인을 기능적인 제품으로 변환하는 데 있어 좋은 교육을 받을 수 있습니다.

이제 어떻게 해야 하죠?

아무도 여러분이 이것을 암기할 것이라고 기대하지 않습니다; 여러분은 여전히 엔진을 어떻게 고치는지도 모른 채 차를 운전할 수 있습니다. 그러나 설계 중인 도구에 대한 기본적인 작업 지식을 습득하여 워크플로우를 개선할 수 있는 방법이 있습니다.
제가 예상하는 디자이너들이 생산 레벨 코드를 작성하는 데 있어서 문제는 그것이 그들의 작업의 맥락을 무시한다는 것입니다. 모바일 앱에서 작업하는 경우 HTML 쓰기 방법을 알아야 하는 이유는 무엇입니까? 인쇄를 위해 설계할 경우, 리액션이 어떤 도움이 되는지 어떻게 알 수 있습니까?
디자이너로서, 우리는 우리의 전문 분야에서 최고가 되는 것 만으로도 행복해야 합니다. 만약 그것이 약간의 개발 작업을 포함한다면, 그것은 환상적입니다. 그렇지 않다면, 그건 완전히 괜찮아요. 만약 여러분이 여러분에게 중요하다고 생각하는 것을 알지 못한다면, 그것을 배우세요.
디자이너로서의 제품 개발 경험은 무엇입니까? 궁금한 점이나 팁이 있으면 LinkedIn에서 찾을 수 있습니다.들어가요! 🚀

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz