디자이너를 위한 코딩 – 우리는 얼마나 알아야 할까요?

자신이 탁월한 것을 취한 다음 자신을 더 밀어붙이십시오.

디자인 커뮤니티의 많은 부분은 디자이너가 코딩을 해야 하는지에 대한 논쟁으로 가득 차 있습니다. 어떤 사람들은 두 가지 모두를 할 수 있는 유니콘을 찾는 것을 선호하는 반면, 다른 사람들은 그들이 존재하지 않거나 방해만 될 뿐이라고 주장합니다.

많은 디자이너는 디자이너와 개발자가 협력해야 한다고 생각하지만 각 분야는 그들이 알고 있는 것을 고수해야 합니다. 다른 사람들은 여러 모자를 착용하는 전문가에게 문제가 없다고 봅니다. 많은 개발자는 위협을 코딩하는 디자이너를 보는 반면 다른 개발자는 자신의 언어를 말하는 법을 배운 환영받는 협력자로 봅니다.

" 공유된 이해 "라고 하는 스위트 스폿은 아마도 그 중간 어딘가에 있을 것입니다. 코드에 대해 조금 안다는 것은 디자이너가 전문 코더 가 되어야 한다는 의미가 아니라 단순히 개발자의 관점을 이해해야 한다는 것을 의미합니다.

UI, 즉 '프레젠테이션 레이어'는 디자이너의 놀이터이지만 이것에만 집중하는 것은 건물의 파사드만 고려하는 것과 비슷합니다. 훌륭한 디자이너는 자신의 디자인을 제공하는 기술적 토대에 익숙해지면 디자이너가 더 인상적일 뿐만 아니라 경력 전망도 크게 향상된다는 것을 이해합니다.

InVision의 디자인 교육 부사장인 Aaron Walter는 Toptal Design Talks 기사에서 다음과 같이 말했습니다.

"디자이너가 코딩을 배워야 하는가"라는 주제 전체가 뜨거운 논쟁거리입니다. 일부 훌륭한 디자이너도 코딩에 능숙하지만 많은 사람들은 특정 기술에 집중하면 전문가가 더 강해질 것이라고 믿습니다. 또한 많은 사람들은 오늘날 다기술 디자이너가 되는 것이 큰 장점이며, 디자이너가 코딩과 같은 다른 유용한 기술을 자신의 벨트 아래에 갖는 데 방해가 되어서는 안 된다고 생각합니다.

문제는 디자이너가 코딩을 얼마나 알아야 하느냐는 것 입니다. 디자이너가 시간을 낭비하거나 개발자의 영역으로 경계를 넘어 잠재적으로 발을 디딜 수 있습니까?

기본 HTML 및 CSS를 아는 것의 이점

디자이너는 HTML (Hyper Text Markup Language) 및 CSS (Cascading Style Sheets, HTML 문서의 구성 요소 스타일을 설명하는 언어)로 구동되는 "프론트 엔드"(프레젠테이션 레이어)에 대한 기본적인 지식을 습득하면 큰 이점을 얻을 수 있습니다. , 그리고 기초를 배우는 것이 얼마나 쉬운지 아마 놀랄 것입니다.

HTML과 CSS는 프로그래밍 로직을 포함하지 않습니다. HTML의 문자 M 은 "Markup"을 의미하며, 페이지의 구성 요소인 페이지 요소의 코딩된 구조를 설명하는 방법입니다. CSS 및 JavaScript가 포함된 HTML은 World Wide Web을 위한 기본 기술의 3요소를 형성합니다.

평신도의 관점에서 HTML은 브라우저에 무엇 을 표시할지 알려주는 아키텍처 맵이고 CSS 또는 CSS(Cascading Style Sheets)는 브라우저에 표시 하는 방법 을 알려주는 코드입니다.

비유적으로 말해서 HTML이 페이지의 골격이라면 CSS는 키, 체형, 피부, 눈 색깔, 머리 색깔 등을 기술할 것입니다. 언어는 타이포그래피, 색상, 위치 및 치수를 결정하는 매우 간단한 코드 구조를 가지고 있습니다. .

코드를 이해하고 코딩하는 방법은 픽셀을 이해하는 것입니다

프론트 엔드 UI를 코딩하는 방법을 배우고 미리보기를 통해 디자이너는 다양한 장치에서 볼 때 사물이 어떻게 표시되는지 즉시 확인할 수 있습니다. 디자이너가 HTML 및 CSS를 사용하는 경우 모든 것이 픽셀로 측정된다는 것을 알게 될 것입니다("em" 및 궁극적으로 픽셀로 변환될 백분율과 같은 다른 측정 단위가 있음).

측정 및 코드 구조, 즉 페이지가 표시되는 방식 을 이해하면 프론트 엔드 개발 프로세스를 더 깊이 이해할 수 있습니다. 그 결과 디자이너는 자신의 디자인과 프로세스를 보다 효율적으로 만드는 방법에 대해 더 깊이 생각하게 됩니다. 그들은 쉽게 달성할 수 있는 것과 더 어려운 것이 무엇인지 알게 될 것입니다.

디자이너를 고유한 자산으로 만드는 프런트 엔드 JavaScript 및 Ajax 노하우

여기에서 일이 복잡해지기 시작할 수 있지만 많은 재미가 발생하는 곳이기도 합니다. 디자이너가 분석적 사고자이거나 특별한 동기를 갖고 있다면 JavaScript 및 Ajax(비동기 JavaScript 및 XML) 학습을 통해 많은 것을 얻을 수 있습니다. 왜요?

프론트엔드 UI 기술 지식을 보여주고 Ajax에 능숙하면 개발자의 존경을 받는 데 큰 도움이 될 것입니다. JavaScript와 Ajax를 참조할 수 있고 이를 사용하는 방법 은 특히 정교한 디자인 아이디어를 개발자에게 설명하는 디자이너의 능력(예: UI의 특정 기능 디자인)을 향상시킬 것입니다.

기술이 얼마나 멀리 갈 수 있고 혁신을 위해 얼마나 밀어붙일 수 있는지 정확히 안다면 디자이너의 관점은 넓어질 것입니다. 코딩과 다양한 기술에 깊이 들어갈 필요는 없습니다. 디자이너가 HTML, CSS 및 JavaScript의 기본 사항을 알고 Ajax를 약간만 사용한다면 이미 경쟁자들보다 훨씬 앞서 있을 것입니다. 그들은 모든 회사와 제품 팀에 고유한 자산이 될 것입니다.

디자이너는 JavaScript 기초를 통해 다음 단계로 나아갈 수 있습니다.

디자이너는 여기서 멈추고 개발자가 백엔드(데이터 액세스 레이어)를 구현하도록 할 수 있지만 일부 스크립팅을 추가하여 디자인을 보다 동적으로 만들 수 있습니다. 웹용 프로그래밍 언어인 JavaScript(스크립팅 언어)를 입력합니다.

웹이 아직 진화하고 있던 2000년대 초반에 Fantasy와 Firstborn과 같은 에이전시는 독특하고 혁신적이며 창의적인 방식으로 JavaScript를 활용하여 웹 디자인 커뮤니티에 큰 인상을 남겼습니다.

JavaScript는 HTML과 CSS를 모두 업데이트 및 변경할 수 있으며 데이터를 계산, 조작 및 검증할 수 있습니다. 동적 상호 작용을 표시하고, 요소에 애니메이션을 적용하고, 백엔드 또는 서버와 반응형 통신을 생성하는 등의 작업에 사용할 수 있습니다.

프론트 엔드 개발에서 JavaScript로 수행할 수 있는 작업에는 제한이 없습니다. 프로그래밍 언어입니다. 함수, 객체, 논리, 조건문, 수학, 수학 및 기타 수학 - 일부에게는 다소 어려울 수 있습니다. 그러나 특히 대다수의 고객이 요구하는 것을 고려할 때 배우는 것은 그리 어렵지 않습니다.

코딩을 배우면 개발자와의 협업이 향상됩니다

남녀가 서로의 마음을 읽을 수 있다면 낭만적인 관계가 더 쉬울까요? 어떤 사람들은 그렇게 생각합니다. 디자이너와 개발자도 마찬가지입니다.

개발자가 생각하는 방식과 작업을 수행하는 데 필요한 것이 무엇인지 아는 것은 디자이너가 다분야 팀에 큰 자산이 될 것입니다. 이 접근 방식은 팀의 다른 구성원에게 무엇을 기대해야 하는지에 대해 더 많은 아이디어를 가질 수 있기 때문에 내부 커뮤니케이션 및 아이디어 프레젠테이션에 유용합니다. 설계자가 이를 수행할 수 있다면 고객에게 보다 강력한 솔루션을 제안할 수 있는 훨씬 더 나은 위치에 있게 될 것입니다.

코딩하는 디자이너는 더 많은 직업 기회를 보게 될 것입니다

모든 디자인 작업 기회에서 코딩 방법을 아는 것은 심사 프로세스와 일상 업무에서 큰 차이를 만들 수 있습니다. Toptal에서 우리는 이 하이브리드 프로필을 가진 전문가를 위한 많은 기회를 보고 있으며, 스타트업은 초기 단계 애플리케이션의 디자인과 프론트 엔드 모두를 인수할 수 있는 사람들을 찾고 싶어합니다.

그럼에도 불구하고 서로의 사업을 엿보는 서로를 싫어하는 디자이너와 프로그래머가 있습니다. 일부는 위협을 받을 수 있고, 일부는 도전을 받을 수 있으며, 일부는 새로운 것을 배우기에는 너무 게으른 것일 수 있습니다. 그러나 진실은 각자가 자신의 옵션을 분석하고 성공 가능성을 높일 수 있는 것에 집중해야 한다는 것입니다.

디자이너가 모든 것을 배우기에 충분한 시간이 없을 수도 있지만, 기본적인 HTML과 CSS를 아는 것만으로도 번창하는 직업과 막다른 직업 사이에 상당한 차이를 추가하기에 충분할 것입니다. 디자이너가 첫 번째 단계를 수행하는 빠르고 쉬운 프로세스여야 합니다. 더 많이 알수록 취업 기회와 관련하여 시야를 넓힐 수 있습니다.

디자이너가 코딩을 배워야 할까요?

다른 팀과 협력하는 적응성과 유연성, 다양한 프로젝트를 처리할 수 있는 능력, 다양한 책임을 맡을 수 있는 광범위한 기술이 항상 요구됩니다. 흥미진진한 신생 기업이나 대기업에서 탐내는 직업과 관련하여 다른 사람보다 우위에 서고 싶지 않은 디자이너가 어디 있겠습니까?

디자이너에게는 접근 방식, 프로세스, 다양한 디자인 도구 및 결과물이 있지만 이는 방정식의 일부일 뿐입니다. 다양한 디지털 기술을 사용하여 UI 디자인이 전달되는 방식 을 탐색하고 이해하면 디자이너를 한 단계 더 발전시키고 훌륭한 디자인을 전달하는 능력을 높일 수 있습니다.

점점 더 많은 디자인 분야에서 HTML, CSS 및 JavaScript를 사용한 기본 웹 개발 및 프로토타이핑 기술과 같은 "있으면 좋은 것"이 포함됩니다. 어느 정도의 작업을 수행할 것인지는 각 디자이너가 결정해야 합니다. 분명히 필요가 있습니다.

AI가 프론트엔드 개발자를 없앨 것인가?

하지만 한 가지 질문이 남아 있습니다. 디자이너를 위한 코딩이 장기적으로 관련성을 유지할까요? 디자이너들 사이에는 AI와 기계 학습을 통해 디자이너가 곧 코드 없이 디자인할 수 있다는 암시가 있습니다. 드래그 앤 드롭으로 화면에서 물건을 이동한 다음 버튼을 누르면 AI가 전체를 코딩합니다. 다시 말해, 이러한 유형의 프론트엔드 개발자를 위한 일자리는 빠르게 사라질 것입니다.

디자이너와 관련하여 답은 단기 대 장기 생각에 있을 수 있습니다. 가까운 장래에 AI가 그 자리를 차지하지 않을 것이며 코딩을 하는 디자이너는 여전히 수요가 많을 것입니다. 단기적으로 눈에 띄고 싶은 디자이너는 JavaScript 및 Ajax와 같은 특정 기본 코딩 기술을 무기고에 유지해야 합니다.

디자이너를 위한 코딩의 숙달은 경력을 향상시킬 것입니다

자신의 기술을 성장시키고 향상시키고자 하는 UI 디자이너에게는 몇 가지 옵션이 있습니다. 그들은 다양한 디자인 기술을 연마하고 시각 디자인, UX 또는 UX 연구와 같은 다른 역할로 이동할 수 있습니다. 그들은 또한 더 많은 고위급, 교장, 책임자, 관리자 및 이사 수준의 역할로 사다리를 점진적으로 올라갈 수 있습니다.

그러나 실제로 경력을 늘리기 위해 디자이너는 개발에 대해 더 깊이 파고 싶어할 수 있습니다. 오늘날 디지털 제품을 구동하는 다양한 기술에 대한 깊은 지식을 습득하면 매우 바람직한 기술을 갖추게 될 것입니다. 이는 차례로 크고 작은 회사에서 더 많은 취업 기회의 문이 열릴 것입니다.

디자이너는 코딩을 해야 합니까? 그럴 수도 있고 아닐 수도있다. 그러나 코딩을 하거나 최소한 다양한 기술에 대한 깊은 지식을 보여주는 디자이너는 여러 분야에 걸친 팀에게 큰 자산이 될 것이며 장기적으로 분명히 성과를 거둘 것입니다.

Toptal Design 블로그에 대한 추가 정보:

• 모바일 UX 디자인 원칙 및 모범 사례
• 모바일 UX 디자인 – 모범 사례, 제약 조건 및 개발자와의 작업
• 이문화 디자인과 UX의 역할
• 디자인 원칙과 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례