디자인 VS 코드 – 함께 가야 하는 이유는 무엇입니까?

디자이너는 웹사이트의 시각적 브랜딩의 예술성에만 집중해야 합니까? 개발자는 코딩만 알면 되나요? Drupal에서 Front-end 개발의 중요성은 무엇입니까? 이 기사에서 모든 질문에 대한 답을 찾아봅시다.

이 디자인 대 코드 수수께끼에 대해 더 깊이 파고들면 둘 다 실제로 서로 보완적이라는 것을 알게 됩니다. 그러나 질문은 왜? UI/UX 디자이너가 코드와 그 기초를 배워야 하는 이유는 디자인 측면에서도 개발자에게도 마찬가지입니다.

두 도메인 모두 창의적이고 사용자와 그들의 행동을 이해하는 것과 관련이 있습니다. 기본적인 코딩 기술과 코드 구조를 모르는 디자이너가 된다는 것은 반쯤 구운 케이크를 준비하는 것과 같으며, 먹고 나면 화장실에 들락날락하게 될 것입니다.

하지만 우선, 예제를 통해 기본 사항에 대해 알아보겠습니다.

Designing Vs Coding : 유사성과 차이점

작가의 경우, 실제로 쓰기 전에 생각을 상상하고 결론을 내려야 합니다. 일기를 쓰거나 블로그나 소셜 미디어 플랫폼에 가서 바로 쓰기 시작하는 사람은 없습니다. 그래서 전체 절차를 작곡이라고 합니다. 예, Gmail에서 이메일을 작성하는 것을 "작성"이라고도 합니다. 자, 왜 우리는 작가, 작곡 등에 대해 이야기하고 있습니까? 추격으로 넘어가자. 이 경우 상상은 당신의 디자인이고, 당신의 생각을 적는 것은 발전입니다. 이제 더 나은 그림을 얻으셨기를 바랍니다. 이 주제의 다른 측면으로 넘어가 보겠습니다.

디자이너는 코드를 배워야 하고 개발자는 UI/UX에 대해 배워야 합니까?

디자인 코드 스프린트 동안 생성된 모든 디자인이 실현 가능하지 않은 상황을 접할 수 있습니다. 결국 최종 제품은 원래 디자인의 수정된 버전이 됩니다. 논의가 일어나고 클라이언트가 요구 사항을 변경하지만 문제는 일관되게 유지됩니다. 설계 팀과 개발 팀이 처음부터 동시에 협력한다면 이러한 상황을 피할 수 있습니다. 그렇게 하면 할 수 있는 것과 할 수 없는 것에 대해 서로로부터 지속적인 피드백을 받기 때문에 작업이 더 효율적으로 완료됩니다.

두 도메인을 모두 이해하는 것은 생각보다 어렵지 않습니다. 어느 쪽이든 상상력, 사고 과정 및 연습이 필요합니다. 그리고 네, 말할 것도 없이 기본적인 기술은 디자인과 코드입니다. 이것은 배우기 위한 선택이지만 알고 있다면 필수는 아닙니다.

디자이너는 디자인의 실현 가능성, 가능성 및 과제를 알아야 하며 코드를 통해 이를 달성하는 방법을 알 때만 알 수 있습니다. 개발자도 마찬가지입니다. 개발자가 사용자가 겪을 수 있는 다양한 시나리오, 사용자 경험, 문제 해결, 솔루션 등을 이해하면 작업을 훨씬 더 단순화하고 효율적으로 만들 수 있습니다.

개인이 핵심 전문 지식과 별도로 기술(코드 또는 디자인) 중 하나의 기초를 배워야 하는 이유는 다음과 같습니다.

1. 제품의 모양과 느낌에 대한 더 많은 제어: 이것이 기본적으로 의미하는 바는 개발자가 디자인 분석이 어떻게 작동하고 어떤 디자인 프로세스가 관련되어 있는지 알 때 해당 디자인 아이디어를 적용하고 최종 제품을 더 많이 제어할 수 있다는 것입니다. 따라서 제품의 더 빠른 배송이 가능합니다.
2. 사용자를 이해하고 디자인에 적용: 개발자가 사용자의 관점에서 제품을 이해하면 사용자가 진정으로 필요로 하고 원하는 것을 만들 수 있는 엄청난 힘이 생깁니다. 예를 들어 사용자가 다양한 타이포그래피, 다양한 버튼 스타일, 색상 구성표 등에 어떻게 반응하는지 이해할 것입니다.
3. 디자인 적응: 디자이너가 코딩을 아는 것도 똑같이 중요합니다. 설계한 제품이 개발되는 동안 구조화되는 방식을 알면 설계를 이상적으로 개선하고 보다 효율적으로 만들 수 있으므로 개발자가 투입하는 시간과 노력을 줄일 수 있습니다.

예제를 통해 핵심 전문 지식만 보유했을 때의 결과 설명

디자인과 코딩이 함께 가야 하는 이유에 대한 더 나은 이해를 위해 몇 가지 예를 살펴보겠습니다.

위의 내용은 비순차적 구조 사용의 전형적인 예입니다. 여기서 구조는 모바일용으로 개발되는 동안 재정렬됩니다. 이것은 나쁜 습관만이 아닙니다. 또한 시간이 많이 걸리고 번거롭습니다. 그러나 설계자가 개발 중인 코드의 구조를 알고 있었다면 쉽게 피할 수 있었을 것입니다.

스크롤이 있는 팝업 오버레이의 위 예를 고려하십시오. 팝업 오버레이는 사용자의 주의를 단일 주제로 돌리도록 설계되었으며 특정 정보를 표시해야 할 때만 초점으로 사용됩니다. 여기에서 팝업 오버레이는 사용자의 주의를 산만하게 하고 팝업이 비효율적임을 증명하지 못할 수 있는 백그라운드에서 스크롤을 가지고 있습니다.

개발자는 항상 작업을 보다 효율적이고 빠른 속도로 완료하는 데 초점을 맞추며 그 과정에서 디자인의 일부 측면을 놓치고 있는데, 이는 불필요하다고 생각하거나 디자인을 약간 조정하여 수행할 수 있습니다. 위에 언급된 예는 개발자가 작업을 수행하지만 결국 디자인을 손상시키는 정확한 시나리오를 보여줍니다. 따라서 개발자가 기본 UI/UX에 노출된 경우 이 문제는 가능하고 쉽게 피할 수 있었습니다.

또 다른 예로, 저축 애플리케이션에서 가져온 위의 스크린샷을 살펴보겠습니다. 작업 자체에는 디지털 서명을 위한 입력 필드가 없습니다. 또한 양식을 제출할 때 오류 메시지는 유효한 디지털 서명을 얻는 방법에 대한 지침이나 제안을 사용자에게 제공하지 않습니다. 개발자가 UI/UX의 기본 사항을 알고 있었다면 사용자에게 다음 프로세스를 쉽게 안내하거나 해당 필드나 제안에 대한 적절한 참조와 함께 보다 간단한 방식으로 메시지를 표시할 수 있었을 것입니다.

어디서 시작하나요?

시작하는 것은 항상 좋은 생각입니다. 디자이너가 배워야 할 기본 사항은 HTML, CSS 및 약간의 JS/jQuery입니다. 연습하고 배울 수 있는 라이브 IDE 도구가 있는 온라인 학습 플랫폼과 웹사이트가 많이 있습니다.

HTML : 모든 디자인의 기본 구조가 우선이며 모든 제품의 코드입니다.
JS/jQuery: 슬라이더, 팝업, 드롭다운 등을 사용하여 훨씬 더 많은 것을 얻을 수 있습니다.
샌드박스: 코드를 가지고 놀 수 있는 라이브 도구
CSS/SCSS : 구조를 스타일링하는 것은 창의적인 과정이며 CSS/SCSS로 달성할 수 있습니다.
W3Schools: 간단한 온라인 학습 플랫폼이자 시작하기에 좋은 플랫폼
Codrops(Tympanus): 동일한 플랫폼에서 디자인 및 개발자 마인드를 가진 방대한 라이브러리

개발자의 경우 다음을 사용하여 UI/UX에 대한 모범 사례를 따라 시작할 수 있습니다.
Behance: 전문 포트폴리오와 영감을 위한 완벽한 디자인 스택
Dribbble: 게시하고 영감을 받을 디자인 아이디어
Muzli: 블로그, 영감, 아이디어
매체 : 모든 분야에 대한 블로그(거의), 모범 사례 및 자습서
Awwwards: 최고의 디자인을 위한 지명 웹사이트 및 영감을 얻을 수 있는 우승자
XD/Figma/Sketch: 목업 디자인 도구, UI/UX용 와이어프레임

디자이너를 위한

개발자용

Drupal의 프론트엔드 개발

Drupal 8은 CMS로서 매우 UI/UX 디자이너에게 친숙한 콘텐츠 관리 프레임워크입니다. 바로 사용 가능한 다양한 테마와 반응형 디자인이 가장 중요하기 때문에 바로 사용할 수 있는 기능이 많기 때문입니다. 물론 지금 당장 생각할 수 있는 기능이 더 많지만 다른 날을 위해 미루도록 합시다.

UX 디자이너가 창의적인 기술을 적용하고 Drupal 웹사이트의 시각적 표현에 집중하는 동안 프론트엔드 Drupal 개발자는 UX 디자이너와 백엔드 Drupal 개발자 사이의 격차를 해소합니다. 그들은 Drupal 웹사이트에서 디자이너가 제공하는 시각적 구성 요소를 구현하는 사람들입니다. UX 디자이너와 프론트엔드 Drupal 개발자는 모두 사용자 경험과 UX와 관련된 문제 해결의 관점에서 생각하지만 이를 해결하는 데에는 서로 다른 접근 방식을 취합니다. 그러나 후자는 항상 코드를 통해 해결 방법을 찾습니다.
프론트엔드 Drupal 개발자는 Drupal 테마를 작업하고 사용자 지정하여 아름다운 Drupal 웹사이트를 제공할 책임이 있습니다. 그들은 PHP, CSS, jQuery, CSS, HTML과 가장 중요한 모바일 우선 웹사이트 디자인에 대한 지식을 갖추고 있어야 하는 프런트 엔드 문제를 해결할 수 있어야 합니다.

헤드리스 Drupal 웹사이트와 분리된 아키텍처의 인기가 높아짐에 따라 Angular, ReactJS, Vue.js와 같은 프론트엔드 개발 프레임워크를 이해하는 프론트엔드 Drupal 개발자는 항상 경쟁 우위를 확보하게 되었습니다.
따라서 전반적으로 프론트 엔드 Drupal 개발에서 뛰어날 수 있으려면 자신의 안락한 영역에서 벗어나 최신 기술을 갖춘 현대적인 디지털 경험을 만들고 구현할 수 있는 최선의 방법을 배워야 합니다.