프로젝트 옐로우핑거 소개 연구실 문의하기
contact@yellow-finger.com
02.2205.4128
Re-Balancing Design and Development
리밸런싱 설계 및 개발
Re-Balancing Design and Development
Codux aims to bridge the widening gap between designers and developers in the modern web era, fostering a collaborative environment where creativity meets code.
코덕스는 현대 웹 시대에 디자이너와 개발자 사이의 넓어지는 격차를 해소하고 창의성과 코드가 만나는 협업 환경을 조성하는 것을 목표로 한다.
요약 :)
요즘은 디자이너와 개발자가 서로 다른 언어로 말하는 것 같아요.

새로운 현상은 아니지만 시간이 지남에 따라 완벽한 시각적 경험을 만드는 것과 이를 실현하는 기술적 현실 사이의 흐름이 멀어졌습니다.

어떻게 여기까지 왔어? 그리고 우리는 그것에 대해 무엇을 할 수 있나요?
더보기→

출처.
Codrops. (2024.04.01). Codrops. Re-Balancing Design and Development. 2024.04.23. https://tympanus.net/codrops/2024/04/01/re-balancing-design-and-development/
요즘은 디자이너와 개발자가 서로 다른 언어로 말하는 것 같아요. 새로운 현상은 아니지만 시간이 지남에 따라 완벽한 시각적 경험을 만드는 것과 이를 실현하는 기술적 현실 사이의 흐름이 멀어졌습니다. 어떻게 여기까지 왔어? 그리고 우리는 그것에 대해 무엇을 할 수 있나요? 예전에는 상황이 달랐습니다… 웹 디자인이 항상 그렇게 복잡한 것은 아니었습니다. 과거에는 디자이너와 개발자가 더 동등한 위치에 있었습니다. 새로운 지평이 열리고 HTML과 CSS에 대한 확실한 이해를 갖춘 디자이너는 자신의 비전을 웹 언어로 직접 구현하여 강한 주인의식과 창의적 자유를 키울 수 있었습니다. 또는 예를 들자면, 몇 년 전, iPhone이 등장하기 전에 Flash(Adobe의)는 웹에서 널리 사용되는 기술이었습니다. 시각적인 것이 먼저였고, 경험의 다른 부분은 그 다음이었습니다. 디자이너와 개발자 모두 내장된 시각화 장치, 컨트롤러, 타임라인 등을 사용하여 놀라운 결과를 얻을 수 있습니다! 과거로부터의 폭발. 플래시는 완벽하지 않았지만 항상 시각적인 것이 우선이었습니다. 게다가 그 당시에는 브라우저가 할 수 있는 일이 훨씬 적었고 표준이 오늘날의 수준과 너무 달랐기 때문에 시작하기 위한 진입 장벽을 훨씬 쉽게 극복할 수 있었습니다. 웹의 가능성이 폭발적으로 커지면서 두 직업 모두를 위한 새로운 기술이 탄생했고 점점 더 커지는 격차가 형성되기 시작했습니다. 디자인 측면에서는 행동 분석, 접근성, 디자인 시스템, 상호 작용/애니메이션 디자인과 같은 새로운 전문 분야가 등장하여 사용자 중심 경험에 초점을 맞춘 활발한 커뮤니티를 조성했습니다. 개발 영역에서는 점점 더 복잡해지는 기술과 프레임워크가 도입되어 더 많은 전문 지식이 요구되고 성능 최적화와 끊임없이 진화하는 코딩 표준을 전담하는 커뮤니티가 탄생했습니다. 그 결과 더욱 복잡하고 인상적인 일들이 이루어졌고, 두 분야 모두에 진출하는 사람의 수가 엄청나게 늘어나 이러한 격차가 더욱 증폭되었습니다. 새로운 접근 방식은 기존 접근 방식입니다. 그 격차를 줄이고 디자인과 개발에서 보다 균형 잡힌 시간으로 돌아갈 수 있다면 어떨까요? 코드 기반 프로젝트를 위해 특별히 제작된 시각적 개발 환경인 Codux를 만나보세요 . Codux는 디자이너가 이미 디자인 도구에서 알고 있는 것과 유사한 시각적 도구를 사용하여 프로젝트의 코드와 시각적으로 상호 작용할 수 있는 안전하고 사용자 친화적인 방법을 제공합니다. 이번에는 실제 코드를 읽고 작성합니다. 초기에 반복하고 빠르게 반복 실험은 좋은 디자인의 핵심입니다. 테스트와 프로토타입이 현실에 가까울수록, 얻는 교훈은 더욱 의미가 있습니다. Codux를 사용하면 모든 단계에서, 심지어 스릴 넘칠 정도로 지저분한 초기 단계에서도 프로젝트 UI와 시각적으로 상호 작용할 수 있습니다. 이는 전반적인 접근 방식이든 기술적 세부 사항이든 문제를 조기에 파악하고 변화에 영향을 미치는 것을 의미합니다. 짧은 주기, 빠른 실패, 두려움 없이 방향을 바꾸는 것이 신속하고 효과적인 문제 해결을 위한 비결입니다. 불합리한 간격을 우연에 맡기지 말고 반복해서 작업하세요. Codux를 사용하면 디자이너로서 타사 라이브러리, 디자인 시스템 구성 요소 또는 팀에서 구축한 일회성 사용자 정의 솔루션 등 기본 HTML, CSS 및 실제 구성 요소를 직접 자유롭게 아이디어하고 프로토타입을 만들고 실험할 수 있습니다. 이를 통해 설계 전반에 걸쳐 일관성을 보장하는 동시에 프로세스를 대폭 가속화할 수 있습니다. 미리 만들어진 빌딩 블록을 사용하여 작업하는 것은 그 자체로 디자인 스프린트처럼 작동하여 품질 저하 없이 프로세스 속도를 높입니다. 걸림돌에 부딪히셨나요? 걱정 마! 새로운 접근 방식을 정의하고 약간 수정한 후 다시 반복하면 됩니다. 환경의 시각적 특성으로 인해 설계 주기가 크게 단축됩니다. 몇 주 또는 몇 달이 아닌 몇 시간 또는 며칠 안에 포괄적인 UX 테스트를 수행한다고 상상해 보십시오. 시각적 작업은 시각적 페르소나에 의해 주도되어야 합니다. 예, 특히 기술 중심 도구에는 항상 학습 곡선이 필요합니다. Codux를 사용하면 간단한 작업부터 시작하여 웹 기술, 프로젝트 및 코드베이스에 대한 지식을 늘리는 동시에 도구가 위협적인 기술 장벽을 제거합니다. 갑자기 버튼을 몇 픽셀만 이동시키기 위해 개발자의 시간을 기다릴 필요가 없습니다. 이제 최고의 결과를 얻기 위해 가장 중요한 영역에 초점을 맞춰 설계부터 구현까지 솔루션을 선택할 수 있습니다. 다른 사람의 작업을 검토할 때 비용이 많이 드는 완전히 새로운 리소스 할당 프로세스를 시작하는 대신 간단한 변경만으로 그 자리에서 쉽게 수정할 수 있습니다. UI가 이런 느낌으로 끝나지 않도록 하고, 올바른 사람들을 올바른 작업에 배치하고, 그들이 가장 중요한 것에 집중하도록 하십시오. 이는 개발자가 중복된다는 의미가 아니며, 오히려 그 반대입니다. 이 접근 방식은 디자인과 개발 전반에 걸쳐 조화를 장려합니다. 이상적인 워크플로는 개발자가 가이드와 리뷰어가 되어 디자이너를 가르치면서 비즈니스 로직, 성능 최적화, 내부의 까다로운 구현 등 복잡한 작업에 집중하는 것입니다. 개발자는 코드의 관리자로서 실수가 빠져나가지 않도록 하고 프로젝트 팀 내에서 코딩 표준을 조정합니다. 언어를 공유하고, 매체를 공유하고, 꿈을 공유하세요 이름을 짓는 것은 매우 어려운 일입니다. 다양한 직업에 걸쳐 두 번 이름을 지정하는 것은 더욱 어렵습니다! 디자인 소프트웨어는 종종 웹이 작동하는 방식을 모방하려고 시도하지만 종종 실패합니다. Sketch, Framer 및 Figma와 같은 도구는 모두 이전 도구보다 웹 중심이지만 웹 현실을 정확하게 표현하는 대신 디자이너의 속도를 여전히 우선시합니다. 이는 설계한 내용이 실제로 구축하기가 훨씬 더 어렵거나 불가능할 때 피할 수 없는 좌절감을 안겨줍니다. Codux를 사용하면 걱정할 필요가 없습니다. 웹을 캔버스로 사용하여 모든 창작물을 본질적으로 구현할 수 있기 때문입니다 . 코드는 캔버스이고 구성 요소는 창작물입니다. Codux는 단일 진실 소스, 즉 실제 코드베이스를 보유함으로써 혼란을 더욱 줄입니다. 결국 이것이 실제 사용자 경험을 주도하는 것입니다. 시간이 지남에 따라 기존 설계 도구에 대한 의존도가 점점 줄어들어 두 위치에서 업데이트하는 문제가 완전히 제거될 수도 있습니다. 디자인 소프트웨어는 여전히 초기 단계 탐색 및 커뮤니케이션에 적합하지만 Codux는 결승선까지의 여정을 처리합니다. 다양한 프로젝트의 이면에 있는 웹 기술을 탐구하는 경험을 쌓으면서 자연스럽게 더 깊은 이해를 갖게 될 것입니다. 이러한 기술적 지식은 점차적으로 귀하의 역량을 강화하여 이전에는 명확하지 않았던 솔루션과 기회를 식별할 수 있게 해줍니다.