The time for designers to learn to code is now

디자이너로서 제가 한 가장 가치 있는 일 중 하나는 코딩을 배우는 것이었습니다. 처음에는 기본적인 이해였기 때문에 디자인 작업의 프런트엔드 구현에 CSS를 조정할 수 있었습니다. 개발자들은 제가 찾던 세부 사항에 대한 관심을 얻지 못했기 때문에 제가 직접 수정하기로 했습니다. 그 후로 저는 CSS 버그를 얻었고 10년 이상 동안 언어가 디자인 관점에서 무엇을 이룰 수 있는지에 주의를 기울였습니다. 물론 다른 것도 배웠습니다. 아시다시피 WordPress, React, yada yada. 하지만 HTML과 CSS가 어떻게 작동하는지 진정으로 이해하면서 실제로 사용자 친화적인 인터페이스를 만들 수 있는 능력이 생겼습니다. 그게 디자이너로서의 우리의 일입니다. 디자인 도구와 끊임없이 확장되는 기능에 대해 떠드는 것이 아니라, 사람들을 위해 물건을 디자인하는 것입니다. 저는 종종 인쇄용으로 디자인할 때 무엇을 반복해서 하는지에 대한 비유를 사용합니다. 교정 인쇄를 하는 것입니다. 그렇다면 웹사이트(또는 앱)를 디자인할 때 Figma에서 웹사이트의 대화형 그림을 만드는 대신 가능한 한 빨리 브라우저에 들어가지 않는 이유는 무엇일까요? 여기서는 코딩을 배우면 디자이너로서 두각을 나타낼 수 있습니다 . 여기서 개발자와 함께 프로덕션 코드를 작성하는 것에 대해 말하는 것이 아닙니다. 어쩌면 미래에는 그럴 수도 있겠지만, How Things Work™에 대한 좋은 이해를 얻고 그 지식을 사용하여 웹 및 앱 디자인 기술을 성층권으로 폭발시키는 것에 대해 말하고 있습니다. 이전에 코드를 작성한 적이 없다면퍼머링크 내가 널 잡았어. 글쎄, 제프가 널 잡았어. Geoff Graham은 최근 The Basics 라는 코스를 출시했습니다 . 이 코스는 이름 그대로 HTML과 CSS의 기본을 가르쳐줍니다. 기본 사항을 확인하세요 Geoff의 장점은 그가 자격을 갖춘 교사라는 것입니다. 그래서 그가 당신을 원하는 곳으로 데려갈 것이라는 것을 알고 있습니다 . $149(글을 쓸 당시)는 싼값입니다 . 우리도 최근에 그것을 지지했습니다 . 약간의 코드를 알고 있지만 더 잘 알고 싶다면퍼머링크 이런 상황에 처한 분들에게 제가 드릴 조언은 Google에서 제공하는 다음 무료 강좌를 수강하라는 것입니다. HTML을 배우다 CSS를 배우세요 (이거 제가 대부분 썼어요!) 보너스로, Learn JavaScript를 시도해 볼 수 있겠지만, 코드를 작성할 수 있는 디자이너가 되기 위해 JavaScript를 배울 필요는 없다는 것을 강조하고 싶습니다 . 저는 단지 웹에서 가장 짜증나는 언어와 생태계를 피함으로써 여러분의 시간과 좌절을 덜어드리고 싶을 뿐입니다. 기본 사항은 익혔지만 지식을 확장하고 싶다면퍼머링크 내가 보기에, 여기서부터 스킬을 쌓는 가장 좋은 방법은 그냥!웹사이트를!만드는 것 입니다 ! 저는 아주 작게 시작해서, 그다음에 자신의 포트폴리오 사이트를 만드는 것으로 확장할 겁니다. 저는 자신의 포트폴리오를 만드는 것을 나중에 두었습니다. 왜냐하면 여러분이 그걸 하면서 완벽함에 갇힐 거라는 걸 알기 때문입니다 . 지금은 여러분이 있고 싶지 않은 곳이거든요 . 좀 더 실용적이고 선형적인 튜토리얼을 먼저 살펴보는 게 어떨까요? 제 튜토리얼 몇 가지를 소개합니다. 풀 블리드 CSS 유틸리티 만들기 반응형 그리드 레이아웃 만들기 콘텐츠를 보기 좋게 만드는 간단한 방법 가독성을 높이기 위해 줄 길이를 제한하세요 점진적 공개 구성 요소 CSS로 시각적으로 요소 숨기기 플로팅 버튼 가입 폼 패턴을 만들어 보자 참고로 이 중 일부가 몇 년 된 것을 알아차리셨나요? HTML과 CSS를 배우는 것의 장점은 웹 표준 이기 때문입니다 . 브라우저에서 웹사이트를 볼 수 있는 한 계속 작동합니다. 최신 Figma 기능에 대해서는 마찬가지라고 할 수 없습니다. 다음으로, 더 고급이지만 여전히 실용적이고 선형적인 튜토리얼로 넘어가겠습니다. 다시 말하지만, 여기 제 튜토리얼이 몇 개 있습니다. CSS로 반응형 미디어 브라우저 만들기 완벽하게 반응하고 점진적으로 향상된 버거 메뉴를 구축하세요 CUBE CSS로 대시보드 만들기 현실 확인 #1: Dribbble에서 가구 사이트 구축 현실 확인 #2: Layers에서 멋진 404 페이지 구축 현실 확인 #3: Dribbble에서 계층화된 영웅 그리드 레이아웃 구축 이것들을 통과하면 HTML 페이지와 CSS 파일을 구성하는 방법에 대해 상당히 자신감을 가질 수 있을 것입니다. 특히 Front-End Challenges Club 에서 몇 가지 도전을 한다면 더욱 그렇습니다 . 필요한 것은 그것뿐입니다! CodePen 계정을 만들고 Dribbbles를 빌드하세요퍼머링크 이는 Set Studio 의 주니어 개발자에게 도움이 되었는데 , 그는 입사하기 전까지 단 한 줄의 코드도 작성한 적이 없었습니다. Dribbble 또는 Layers 로 가서 웹 디자인으로 필터링하세요. 아주 간단해 보이는 것을 골라서 시작하고, CodePen 계정을 실행하세요 . HTML, CSS, JS 패널이 있고, 그 망할 것을 만들어 보세요. 그렇게 한 후, 더 복잡한 것을 선택하고 다시 시작하세요. 복잡성을 계속 쌓아 올리면 지식의 틈을 발견하게 될 것입니다. 예를 들어, "Figma에서처럼 애니메이션을 만들고 싶다"고 생각할 수도 있습니다. CSS 애니메이션을 배우 거나 영원히 존재해 온 GSAP와 같은 라이브러리를 사용하면 그보다 더 나은 결과를 얻을 수 있습니다. 뷰 전환은 Figma의 스마트 전환 기능도 제공합니다. 접근성에 대해 배우고 싶다고 생각할 수도 있습니다. Learn Accessibility를 클릭한 다음 CodePens로 돌아가 접근성 성능을 개선해 보세요! 코드를 일회용으로 취급하고 플랫폼에 기대십시오.퍼머링크 마지막으로, 특히 .을 배우고 있을 때는 코드를 일회용으로 취급해야 한다는 것을 강조하고 싶습니다 . 당신은 그저 웹사이트를 구축하고 있을 뿐입니다, 친구. 가장자리가 거칠어도 괜찮습니다. 웹은 가장자리가 거칠죠! 코딩을 배우는 이점 중 하나는 브라우저가 더 많은 작업을 수행할수록 출력 결과가 더 좋아진다는 것입니다. 예를 들어, Figma의 자동 레이아웃은 레이아웃에 관해 매우 구체적으로 알려주지만 대부분의 경우 브라우저에서 작동하는 유연한 레이아웃 시스템이 필요합니다. Figma는 아마 픽셀로 조판을 생각하게 만들었을 겁니다. 대신 유동적 유형 과 상대적 단위를 사용하라고 조언하고 싶습니다. Figma는 또한 아트보드의 세트 크기에 대해 생각하게 했습니다. 웹은 실제로 그렇지 않습니다. 왜냐하면 우리는 현실 세계에서 이상적인 뷰포트가 무엇인지 전혀 모르기 때문입니다 . 브라우저의 마이크로매니저가 아닌 멘토가 되면 장치 , 연결 속도 또는 상황에 관계없이 모든 사람에게 적합한 웹사이트를 디자인하는 데 도움이 됩니다. 마무리퍼머링크 이 글을 읽고 "젠장, Figma 도구를 더 배우는 대신 코드를 작성하고 싶어"라고 생각했기를 바랍니다. Piccalilli에서 바로 그런 곳에 오셨습니다. 시작하고 "이봐, 누군가가 당신이 갇힌 것에 대해 써줬으면 좋겠다 " 고 생각한다면 알려주십시오. 실제로 우리가 당신을 위해 그 문제에 대해 써드리겠습니다. 기사 서두에서 말했듯이, 코딩을 배우면 더 나은 디자이너가 될 수 있고, 이 출판물이 업계에 진정한 영향을 미칠 수 있는 더 좋은 방법은 여러분이 그 목표에 도달하도록 돕는 것 외에는 별로 떠오르지 않습니다. 오늘 왜 이걸 올렸는지 궁금하실 겁니다. 글쎄요, 지금은 Figma의 컨퍼런스인 Config 입니다 . 디자이너들이 기대하는 멋진 새로운 기능이 많이 있지만, "AI" 디자인 생성기가 추가되어 기술 세트를 확장하는 데 집중할 수 있을 겁니다. 스콧 과 레이첼 같은 사람들은 왜 Currently Hot Product™의 새로운 웹사이트 코스프레 기능을 사용하지 않는 것이 좋은지에 대해 옳게 이야기하고 있습니다. HTML과 CSS를 배우는 것에 대해 기억해야 할 것은 그것들이 웹 표준 이며 Figma, Adobe XD, Sketch보다 오래 지속될 것이라는 것입니다. 최악의 경우, 코딩을 배우면 개발자와 훨씬 더 잘 소통하는 데 도움이 될 것입니다. 최상의 경우, 끊임없이 변화하고 확장되는 산업에서 디자인 기술이 훨씬 더 포괄적이고 관련성이 높아질 것입니다.