원자 설계의 아버지 브래드 프로스트(Brad Frost)에 따르면 미래는 어둡다
간단한 버튼을 개발하든 완전한 형태를 개발하든 관계없이 수년 동안 사용자 인터페이스를 만드는 데에는 바퀴를 재발명하는 작업이 포함되었습니다. 2013년에 브래드 프로스트(Brad Frost)는 시스템 설계에 대한 우리의 생각을 바꾸는 개념인 Atomic Design을 세상에 소개했습니다. 많은 사람들이 이것이 "유행적인" 용어라고 생각하지만 사실 이 방법론은 디지털 제품 제작의 현재 및 미래 과제와 매우 관련이 있습니다.
이 기사에서는 최근 강연에서 자세히 설명한 Frost의 아이디어가 어떻게 확장 가능하고 효율적인 디자인 시스템 개발의 기본이 되는지, 그리고 인공 지능(AI)의 부상을 포함하여 기술이 어떻게 진화하고 있는지 논의하고 싶습니다. ), Atomic Design이라는 개념이 그 어느 때보다 필요해졌습니다.
Atomic Design은 죽었나요? 10년간의 영향과 진화에 대한 성찰
"Atomic Design은 죽었나요?" 좋아, 점심 식사 후에 사람들을 깨우는 좋은 방법이군요. 하지만 제가 하고 싶은 것은 지난 10년을 되돌아보는 시간을 갖는 것입니다. 10년 전, 올해에 저는 Atomic Design이라는 것을 만들었습니다. 그것은 여전히 주변에 있습니다. 그래서 조금 반성해볼 수 있는 좋은 시간이었다고 생각했습니다. 괜찮다면 같이 작은 여행을 떠나자."
브래드 프로스트는 이 도발적인 서문을 통해 웹 디자인의 진화와 그가 2013년에 세상에 소개한 방법론인 Atomic Design에 대해 성찰하도록 초대합니다. 최근 Frost가 공유한 여정은 웹 초창기부터 복잡한 디자인 시스템의 개발까지 포괄하며, Atomic Design의 기본이 오늘날의 과제와 어떻게 관련되어 있는지를 상기시켜 줍니다. 하지만 Atomic Design은 끊임없이 변화하는 디지털 인터페이스 시대에 여전히 관련성을 유지합니까?
웹의 진화: 간략한 회고
Frost는 1991년에 첫 번째 웹사이트가 출시되었고 그 직후인 1994년에 CSS가 등장했던 웹의 시작으로 우리를 데려갑니다. "옛날 옛적에 웹사이트가 있었죠? 1991년, 첫 번째 웹사이트가 1991년, CSS입니다. 1994년에 태어났어요. 지오시티즈, 그 시대에 살았던 사람이 있나요? 네, 저 같은 노인들도 있었죠." 그는 초기에는 디자인이 HTML과 애니메이션 GIF만 포함하는 간단한 작업이었다고 회상합니다. "그냥 HTML을 작성하고 있었죠? 그게 전부였어요. 그리고 애니메이션 GIF 같은 것을 붙여넣기도 했죠."
웹이 성장함에 따라 새로운 접근 방식이 등장하기 시작했습니다. Photoshop은 나중에 잘라내어 웹 페이지로 변환할 수 있는 시각적 레이아웃을 만드는 데 사용되기 시작했습니다. 이 과정을 통해 90년대에 "킬러" 웹사이트가 탄생하게 되었습니다. Frost는 다음과 같이 설명합니다. "90년대 중반에 우리는 브로셔를 Photoshop에서 편집하고 꺼내서 인터넷에 던지세요."
대화형 인터페이스와 복잡성의 증가
보다 인터랙티브한 웹 경험을 가져온 Ajax와 같은 기술의 발전과 2008년 iPhone 및 App Store 출시 이후 모바일 애플리케이션의 등장은 디자인에 새로운 도전을 가져왔습니다. Frost가 설명했듯이 "웹 2.0이 등장했고 이것이 Ajax라고 불렸습니다. 갑자기 우리는 더 많은 대화형 경험을 갖기 시작했습니다. 그것이 의미하는 바가 무엇이든 '웹 앱'과 같은 것을 갖게 되었습니다."
디바이스, 운영 체제, 경험이 늘어나면서 디자이너와 개발자는 플랫폼 전반에서 일관성과 일관성을 유지해야 하는 과제에 직면하기 시작했습니다. "Photoshop 파일이 많아지고 브랜드 지침도 따라야 하지만 그런 일은 결코 일어나지 않았습니다." 여기에서 스타일 가이드와 디자인 패턴의 출현을 볼 수 있지만 여전히 단편적이고 관리하기 어려웠습니다.
해결책: 원자 설계
이러한 맥락에서 Frost는 모듈식 및 확장 가능한 인터페이스를 만들기 위한 체계적인 접근 방식인 Atomic Design을 도입했습니다. 분자, 유기체, 템플릿 및 페이지로 결합된 사용자 인터페이스의 기본 구성 요소인 "원자" 개념은 점점 커지는 디지털 디자인의 혼란에 대한 해결책을 가져왔습니다. Frost는 "점점 복잡해지는 디자인 시스템에 일관성과 효율성을 제공하려는 목표로 Atomic Design을 만들었습니다."라고 말합니다.
그는 Atomic Design이 단순히 UI 구성요소를 구성하는 방법론이 아니라 디자이너와 개발자가 보다 효과적으로 협업할 수 있도록 돕는 것을 목표로 하는 철학이라고 주장합니다. "이 방법론은 재사용 가능한 구성 요소의 명확한 계층 구조를 만들어 제품 개발의 일관성과 시간 절약을 촉진하는 것을 목표로 합니다."
자동화와 AI 시대의 원자 설계
Atomic Design의 관련성은 시간이 지나도 줄어들지 않았습니다. 실제로 Frost는 인공지능(AI)의 등장과 디자인 자동화의 증가로 인해 Atomic Design이 더욱 중요해졌다고 강조합니다. 그는 2025년까지 온라인 콘텐츠의 90%가 AI에 의해 생성될 수 있다는 예측을 인용하며, 콘텐츠가 기하급수적으로 증가하는 가운데 품질과 일관성을 보장할 수 있는 강력한 디자인 시스템의 필요성이 증가하고 있다고 말했습니다.
Frost는 '철갑상어의 법칙'을 언급하며 '모든 것의 90%는 쓰레기'라고 말합니다. 그는 AI로 콘텐츠를 쉽게 생성하면 잘못 설계된 인터페이스가 확산될 수 있다고 경고하면서 Atomic Design을 사용하여 인터페이스를 신중하고 구조화된 방식으로 설계하는 것이 중요하다고 강조합니다.
디자인의 미래: 협업과 공유 표준
Brad Frost는 디자인 팀과 개발 팀 간의 더 많은 협력과 표준 공유를 요구하며 성찰을 마무리합니다. 그는 미래의 과제를 해결하려면 다양한 팀과 조직에서 패턴과 구성 요소를 효율적으로 재사용할 수 있는 글로벌 협업을 촉진하는 시스템을 만들어야 한다고 믿습니다.
"Brad는 개발자와 디자이너 커뮤니티가 계속 협력하고 웹의 힘을 활용하여 사람들을 하나로 모으고 의미 있는 방식으로 문제를 해결할 것을 촉구합니다."
따라서Atomic Design은 죽지 않았습니다. 오히려 현재와 미래의 디지털 디자인 과제를 해결하는 데 필수적인 도구입니다. 자동화와 AI 시대에는 고품질의 일관된 디지털 경험을 만들기 위해 체계적이고 협업적인 접근 방식을 갖는 것이 그 어느 때보다 중요합니다.
원자 디자인이란 무엇입니까?
아직 익숙하지 않은 분들을 위해 설명하자면 Atomic Design은 5가지 주요 레벨을 기반으로 인터페이스를 만드는 모듈식 접근 방식입니다.
- Atom: 인터페이스의 가장 기본적인 구성 요소입니다(레이블, 입력, 버튼 등과 같은 HTML 태그).
- 분자: 단순하고 기능적인 구성 요소를 형성하는 원자의 조합
- 유기체: 페이지의 헤더나 섹션과 같이 더 복잡한 부분을 구성하는 분자의 조합
- 템플릿: 유기체를 구성하고 레이아웃을 정의하며 구성요소가 서로 어떻게 연관되는지를 정의하는 구조입니다.
- 페이지: 템플릿이 실제 콘텐츠로 채워지고 최종 사용자에 맞게 맞춤설정되는 마지막 단계입니다.
이 방법론은 재사용 가능한 구성 요소의 명확한 계층 구조를 만들어 제품 개발의 일관성과 시간 절약을 촉진하는 것을 목표로 합니다.
Atomic Design이 여전히 관련성이 있는 이유는 무엇입니까?
Brad Frost의 최근 강연에서 그는 Atomic Design의 기본 아이디어가 단순히 재사용 가능한 구성 요소를 만드는 것이 아니라 해당 구성 요소를 제품과 연결하는 것이라고 언급했습니다. 이를 통해 로그인 또는 로그아웃한 사용자, 관리자 또는 방문자, 지역적 또는 언어적 변화 등 다양한 상황에 맞게 최종 제품의 디자인이 더욱 일관되고 유연해집니다.
Brad는 또한 디지털 인터페이스의 현재 상태를 반영하여 전 세계 여러 팀에서 재현하는 구성 요소의 조각화를 강조합니다. 그는 아코디언이나 셀렉트와 같은 동일한 기본 기능이 다양한 조직에서 어떻게 다른 방식으로 재창조되어 엄청난 비효율성과 인재 낭비를 초래하는지 언급합니다.
이러한 노력의 중복은 디자인 시스템이 표준을 통일하여 해결하려고 하는 가장 큰 비효율 포인트 중 하나입니다. 그러나 Frost가 언급했듯이 여전히 많은 개발 팀이 글로벌 표준에 맞춰 협력하기보다는 이미 해결된 문제에 대한 자체 솔루션을 만드는
것을 볼 수 있습니다.原子設計:仍然相關的心理模型
根據 Frost 的說法,原子設計 作為一種以分層和互連方式組織 UI 組件的解決方案而出現,促進了設計人員和開發人員之間的協作。他將自己的方法描述為一種「以分層和互連的方式思考使用者介面」的方式,並強調任何介面都可以分解為更小的組件,例如標籤、按鈕和輸入欄位,他將其與界面的“原子”進行比較。 「這些實際上就像我們的原始 HTML 標籤。它們本身並不是很有用,」Frost 指出。
這些原子結合成分子和有機體,例如可以包含徽標、導航和搜尋列的標題。然後將這些模組化組件放置在模板內,這是真實頁面的“骨架”,允許設計和開發團隊在不同的上下文中驗證這些組件的性能。
對原子設計的批評
弗羅斯特不迴避他的概念在過去十年中受到的批評
。許多人認為原子設計可能過於僵化,阻礙了設計團隊的創造力和創新。 Frost 回應了這些擔憂,指出原子設計的目標不是限制創造力,而是提供堅實的基礎,允許在明確定義的系統內自由創新。
原子設計的遺產
在演講結束時,Frost 給我們留下了對數位設計未來的深刻反思。他鼓勵每個人不斷探索新的工作方式,同時記住協作、一致性和重複使用的重要性。 「永遠不要停止做你正在做的事情。你會找到思考設計的新方法,你會因此感覺更好。」
總之,原子設計是一個強大的工具,可以持續為數位設計挑戰提供有效的解決方案。透過促進標準的協作和共享,我們可以打造更具凝聚力的高品質數位體驗。 Frost 的遺產以及他在 Atomic Design 方面的工作無疑對於下一代設計師和開發人員至關重要。
原子設計的未來與協作的需要
Brad Frost 提醒我們的是,原子設計的本質超越了技術組件。這是一種協作方法。他提出,為了解決設計和技術挑戰,我們需要創建一個協同工作的系統,而不是一個孤立的系統。這包括不同組織的共同努力,為可在全球範圍內應用的共享標準做出貢獻。
在演講結束時,Brad 呼籲開發人員和設計師社群繼續合作,利用網路的力量將人們聚集在一起,以有意義的方式解決問題。他相信,透過專注於人類解決方案並合乎道德地使用技術,我們可以為每個人創造更好的數位體驗。
結論
即使在創建十年後,原子設計對於那些想要創建高效且可擴展的設計系統的人來說仍然是一個重要的方法。在人工智慧可以主導介面開發的世界中,Frost 的方法提供了一種在介面設計中保持品質和一致性的方法。
現在,採用促進協作和重用明確定義的標準的方法比以往任何時候都更加重要。原子設計不僅是活生生的-它也是解決未來設計挑戰的基本指南。
原子設計並沒有消亡。相反,它仍然是應對數位設計中日益增長的複雜性和對品質、可近性和效率的要求的重要工具。 Brad Frost 提醒我們,雖然設計已成為一項全球性的重複性任務,但協作以及對可重複使用、價格實惠的組件的關注是創建真正改變世界的設計系統的關鍵。
위 내용은 원자 설계의 아버지 브래드 프로스트(Brad Frost)에 따르면 미래는 어둡다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.
