디자이너가 이미지 기반에서 코드 기반 디자인으로 전환할 시간

이미지 기반에서 코드 기반 디자인으로 전환하는 이유는 무엇입니까?

디지털 제품 디자인의 여명기부터 큰 이슈가 있었습니다. 디자이너는 제품 개발 프로세스에서 분리되어 소프트웨어로만 작업해야 합니다.

디자이너는 조직의 나머지 부분과 격리된 상태에서 래스터 그래픽 또는 벡터 디자인 도구를 사용하여 그림을 그립니다. 대부분의 경우 프로세스는 Photoshop, Gimp, Sketch 또는 Fireworks와 같은 다른 소프트웨어에서 작동하더라도 동일하게 유지됩니다. 정적 이미지 세트는 설계자가 렌더링한 의도로 엔지니어에게 전송됩니다.

정적 아트 보드를 통해 인터페이스의 다양한 상태를 보여주는 것은 매우 지루합니다. 따라서 모든 것이 디자이너에 의해 자세히 설명되지 않습니다. 그리고 결국 전체 사용자 인터페이스는 불완전한 정적 이미지 세트의 도움으로 엔지니어가 구축합니다. 종종 긴 앞뒤 의사 소통에서 모든 상호 작용 상태는 일반적으로 정리됩니다.

경험은 정적인 디자인으로 정확하게 표현되지 않으므로 테스트는 일반적으로 사용자에게 지루합니다. 조직이 제품에 실패하고 팀을 좌절시키는 것은 이러한 비효율적인 프로세스 때문입니다.

오늘날 기술의 발전 덕분에 우리는 사물을 더 잘 디자인할 수 있게 되었습니다. 이미지 기반 디자인 도구는 코드 기반 디자인 도구 패러다임으로 빠르게 대체되고 있습니다. 벡터 디자인 도구 또는 래스터에서 가져온 디자인의 정적 표현은 디자이너가 실제로 코딩 방법을 알지 못한 채 코드에서 직접 의도하는 렌더링된 디자인으로 대체됩니다.

다음과 같은 새로운 도구 세트에서 새로운 워크플로가 제공됩니다.

• 디자이너와 엔지니어 모두 단일 정보 소스를 설정합니다.
• 코딩 경험이 없어도 디자이너에게 코딩의 모든 권한을 부여합니다.
• 두 명의 디자이너와 엔지니어가 단일 협업 크리에이티브 프로세스를 통해 연결되어 놀라운 워크플로 진화를 만듭니다.

UXPin을 사용한 이미지 기반에서 코드 기반 설계

여기서 첫 번째이자 기본적인 질문은 이미지 기반에서 코드 기반 디자인으로 전환하기 전에 이미지 기반 디자인에서 무엇이 좋지 않거나 비효율적인가 하는 것입니다. 디자인 도구에는 두 가지 패러다임, 즉 코드 기반 및 이미지 기반 디자인 도구가 있다는 것을 잘 알고 계실 것입니다.

이미지 기반 디자인 도구는 수십 년 동안 사용되어 왔으며 상당히 오래된 접근 방식입니다. 디자이너는 이 도구 접근 방식의 아이디어인 무언가를 그릴 때 벡터 또는 래스터 그래픽을 만들어야 합니다.

이 접근 방식을 통해 설계자는 최대한의 유연성을 확보할 수 있습니다. 고급 일러스트레이션에서 간단한 아이콘에 이르기까지 가장 아름다운 수준의 세부 사항을 포함하여 모든 것을 이 방법으로 효과적으로 그릴 수 있습니다. 전문적인 디지털 제품 개발에 관해서는 일반적으로 중단됩니다. 이것이 발생하는 이유입니다.

1. 상호 운용성 부족: 사진, 일러스트레이션 및 아이콘을 제외한 제품의 실제 인터페이스는 이러한 그래픽으로 구축되지 않습니다. 디자이너는 이미지 기반 디자인 도구에서 인터페이스 디자인 작업을 할 때 코드에 설정된 제약 조건을 벗어나 작업합니다. 이로 인해 코딩 비용이 많이 드는 작업과 알려지지 않은 방식으로 어려운 작업을 만들 수 있습니다.

2. 정확성 부족: 디테일한 멋진 디자인을 만드는 것 외에도 개발 과정에서 가장 부정확한 결과는 종종 이미지 기반 도구를 사용하는 것입니다. 디자이너의 작업은 완전히 다른 프로세스로 렌더링됩니다.

따라서 같은 사양을 적용하더라도 디자이너가 선택한 그라디언트, 텍스트, 색상의 코드와 엔지니어가 선택한 코드에는 차이가 있습니다. 이로 인해 팀은 대규모 오정렬의 영향을 받습니다.

3. 정적 디자인: 이미지 기반 디자인 도구에 대한 워크플로 초점은 결국 함께 링크되는 인터페이스의 모든 상태에 대한 정적 아트보드를 구축하는 것입니다. 전문 프로젝트의 경우 이는 침입 접근 방식입니다. 정적 창에서 가장 단순한 패턴은 관리할 수 없는 드롭다운처럼 됩니다.

이는 재사용을 위해 대화형 구성 요소를 보존하는 기능이 부족하고 아트보드가 상당히 많기 때문에 발생합니다. 무엇보다도 이러한 도구는 콘텐츠, 요소 상태, 조건부 논리 등에 대한 변수를 설정하는 기능 없이 기본적인 상호 작용만 허용합니다.

4. 디자인 엔지니어링의 약한 협업: 엔지니어링 프로세스는 이 도구와 완전히 다르며 병합할 수 없습니다. 두 세계의 산출물은 그 본성과 단절되어 있습니다.

사용자가 사용하는 기술은 개발자 작업의 최종 제품이며 최종 사용자 경험에서 멀리 떨어진 추가 추상화 계층은 이미지 기반 디자인에 의해 도입됩니다.

디자이너와 엔지니어는 재사용 가능한 대화형 구성 요소, 실제 상호 작용의 부족, 코드에서 연결을 가져올 수 있는 기능 때문에 서로 연결이 끊어지고 좌절합니다.

코드 기반 디자인의 독창성

이미지 기반에서 코드 기반 디자인으로의 전환을 강조하고 있으므로 이 디자인에서 무엇이 특별한지 아는 것이 중요합니다. 사용자가 코드 기반 디자인 도구를 사용하여 무언가를 그릴 때 관련 CSS/HTML/JS를 만들고 브라우저를 사용합니다. 결과를 시각적으로 표시하도록 엔진을 렌더링합니다.

다음은 이미지 기반에서 코드 기반 디자인으로 전환한 후 디자이너가 얻을 수 있는 이점입니다.

1. 충실도: 디자이너의 의도와 코드 기반 디자인을 사용할 때 코드 가능한 결과 사이에는 100% 일치가 있습니다. 모든 디자인 프로젝트를 렌더링하려면 코드 기반 디자인에 사용되는 기술은 웹 개발과 동일합니다.

2. 디자이너와 개발자 사이의 제약 차이 제거: 디자인하기 어렵고 코드에서 재현할 수 없는 것은 디자이너가 이미지 기반 도구에서 만들 수 있습니다. 이러한 완전히 동일한 제약 조건은 코드 기반 도구의 디자이너와 개발자 모두에게 적용됩니다. 따라서 디자이너와 개발자 모두 동기화 상태를 유지합니다.

3. 아트 보드를 인터랙티브 구성 요소로 대체: 연결된 아트 보드 대신 코드 기반 디자인 도구는 구성 요소에서 가장 발전된 인터랙션을 사용합니다. 이 접근 방식은 디자이너가 재사용 가능성이 높은 대화형 디자인 시스템을 만들 수 있도록 직접 권한을 부여하고 개발을 모방하기도 합니다.

4. 현실적이고 강력한 상호 작용: 이미지 기반에서 코드 기반 설계로의 전환으로 개체는 서로 상호 작용하고 화면에서 이동하며 복잡한 패턴을 만들 수 있습니다. 엔지니어와의 협업 및 사용자와의 테스트에 가장 중요한 코딩 방법을 알 필요는 없습니다.

5. 가장 강력한 협업 생성: 엔지니어링 및 설계 협업에 대한 완전히 새롭고 혁신적인 접근 방식은 코드 기반 패러다임을 통해 달성됩니다.

관련 기사

웹 디자이너와 웹 개발자의 차이점