RSS. A List Apart: 전체 피드 - TheNote.app

RSS. A List Apart: 전체 피드
팔로우

A List Apart는 웹에서 디자인, 개발, 사용자 경험 및 최적의 방법에 초점을 맞춘 온라인 잡지입니다. 1998년에 Jeffrey Zeldman과 Greg Storey에 의해 설립된 이 사이트는 세계 웹 전문가들에게 있어 존경받는 자원으로 성장했습니다. 이 사이트에는 튜토리얼, 인터뷰, 심층 분석을 포함하는 기사, 직업 공고 및 행사 발표가 있습니다. A List Apart는 Automattic 네트워크의 일부이므로 오픈 소스이고 광범위한 청중에게 접근할 수 있습니다. 이 웹사이트는 웹 디자인 및 개발 산업에서 최신 트렌드 및 기술을 유지하는 데 필요한 새로운 콘텐츠로 정기적으로 업데이트됩니다.

RSS alistapart.com

A List Apart: The Full Feed alistapart.com

RSS Hunter • 2024년 8월 23일

노트 스레드

좋은 디자이너, 나쁜 웹사이트: 한 가지 제안

저자는 웹 디자인에서 접근성의 중요성을 강조합니다. 디자이너들은 본질적으로 포괄적인 디자인을 만들고 싶어하지만, 일부 디자인이 여전히 사용자를 배제한다는 것을 인정합니다. 핵심 문제는 디자이너가 기억해야 하는 정보의 양이 너무 많다는 것입니다. 여기에는 접근성 지침도 포함됩니다. 저자는 닐슨의 사용성 휴리스틱 "회상보다는 인식"을 사용하여 이 문제를 해결할 것을 제안합니다. 저자는 "모두를 위한 웹"과 같은 페르소나를 사용하여 접근성 문제를 쉽게 식별할 것을 권장합니다. 이러한 페르소나는 다양한 사용자 요구 사항과 장애를 나타내며, 공감적인 디자인 결정을 용이하게 합니다. 저자는 또한 잠재적인 오용을 고려하기 위해 "페르소나 논 그라타"의 사용을 제안합니다. 각 프로젝트의 "지정된 반대자"는 디자인이 각 페르소나에 미치는 영향을 고려해야 합니다. 저자는 다양한 플랫폼에 대한 접근성 지침 리소스를 제공합니다. 저자의 숙제는 모든 디자인 프로젝트에서 제공된 페르소나를 활용하는 것입니다. 이 접근 방식은 처음부터 접근성을 핵심 고려 사항으로 만드는 것을 목표로 합니다. 궁극적으로 목표는 모든 사용자를 위한 디자인을 되찾는 것입니다.

Good designers, bad websites: a proposal alistapart.com

RSS Hunter • 4월 23일

친밀함을 위한 디자인: 비엔나로부터의 교훈

이 텍스트는 온라인 환경에서의 친화력의 중요성을 탐구하며, 현대 웹사이트와 소셜 미디어의 종종 적대적인 특성과 대조합니다. 그런 다음, 대공황 시대 비엔나에서 활동했던 학제간 사고 집단인 비엔나 학파를 긍정적인 상호 작용을 촉진하는 사례 연구로 사용합니다. 카페와 대학 사무실에서 만난 비엔나 학파는 엄격한 추론과 열린 토론에 중점을 두고 복잡한 철학적, 수학적 문제를 다루었습니다. 지적 진지함, 경험주의, 추상성, 개방성으로 특징지어지는 이 환경은 서로 다른 성격과 관점에도 불구하고 생산적인 토론을 촉진했습니다. 이 그룹의 친화력은 격식, 어느 정도의 비격식, 유머의 존재를 포함한 비엔나 카페 문화의 측면에 의해 더욱 강화되었습니다. 파시즘의 부상은 이 환경을 파괴했고, 많은 구성원들이 도망치고 일부는 치명적인 결과를 겪었습니다. 저자는 비엔나 학파의 성공에서 얻은 8가지 친화적인 디지털 공간을 만들기 위한 설계 원칙을 제시하며, 진지함, 경험주의, 추상성, 격식, 개방성, 패러디의 중요성을 강조하며 결론을 맺습니다.

Design for Amiability: Lessons from Vienna alistapart.com

RSS Hunter • 2025년 10월 15일

디자인 방언: 시스템을 망가뜨리지 않고, 규칙을 깨기

이 글은 디자인 시스템을 단순한 컴포넌트 라이브러리가 아닌 살아있는 언어로 봐야 한다고 주장합니다. 즉, 구어처럼 상황에 맞춰 변화해야 한다는 것입니다. 디자인 시스템의 엄격한 시각적 일관성은 사용자 경험을 저해할 수 있으므로 유연성과 적응성이 필요합니다. 핵심 개념은 "디자인 방언"으로, 특정 사용자 그룹이나 환경과 같은 특정 상황에 맞게 디자인 시스템을 체계적으로 수정하는 것을 의미합니다. 저자는 Booking.com과 Shopify에서의 경험을 회상하며 엄격한 일관성이 실패했던 사례를 통해 방언의 필요성을 강조합니다. "유연성 프레임워크"와 "의사 결정 사다리"를 제공하여 팀이 디자인 시스템 내에서 일관성과 적응성의 균형을 맞추도록 안내합니다. 저자는 편차를 문서화하고, 공유 패턴을 장려하며, 상황에 맞춰 사용 중단을 권장하여 방언의 진화를 관리할 것을 제안합니다. 강조되는 핵심 원칙은 사용자 성공이 미적 일관성보다 우선하며, 획일성보다 유창성을 우선시해야 한다는 것입니다. 방언 구현은 깨진 사용자 흐름을 식별하고, 상황을 이해하고, 체계적인 변경을 수행하는 것으로 시작됩니다. 영향력을 테스트하고 측정하며, 그 결과로 얻어지는 절감액을 보여주는 것이 필수적인 단계입니다. 궁극적으로 이 글은 사용자의 요구를 충족하기 위해 진화하고, 시간이 지남에 따라 적응하고 성장하는 디자인 언어를 육성할 것을 옹호합니다.

Design Dialects: Breaking the Rules, Not the System alistapart.com

RSS Hunter • 2025년 9월 26일

공유 설계 리더십을 위한 총체적 프레임워크

건강한 디자인 팀을 위해서는 디자인 매니저와 리드 디자이너 모두 필요하며, 이 둘은 동일한 유기체의 서로 다른 측면을 관리하는 것으로 간주해야 합니다. 디자인 매니저는 팀 심리, 경력 성장, 역학(정신)에 집중하는 반면, 리드 디자이너는 기술, 디자인 표준, 실행(신체)에 집중합니다. 이 두 역할은 겹치며, 세 가지 핵심 시스템에서 협업이 필요합니다. 신경계(사람 및 심리), 근육계(기술 및 실행), 순환계(전략 및 흐름)입니다. 디자인 매니저는 주로 신경계를 감독하고, 리드 디자이너는 주로 근육계를 감독하며, 서로 지원합니다. 두 역할 모두 전략적 일치와 정보 흐름을 보장하는 순환계에 대한 책임을 공유합니다. 명확한 피드백 루프와 명시적인 인수인계는 성공적인 파트너십에 매우 중요합니다. 문제가 발생하면 고립, 순환 불량 또는 자가 면역 반응이 발생할 수 있으며, 이는 재연결, 명확한 커뮤니케이션 및 공유 목표에 집중하여 해결해야 합니다. 이러한 파트너십은 더 나은 의사 결정, 더 강력한 팀, 지속 가능한 디자인 작업을 창출하며 팀이 성장함에 따라 효과적으로 확장됩니다. 궁극적으로 디자인 매니저와 리드 디자이너는 협력하여 전체 디자인 유기체를 육성함으로써 영향력을 배가시킵니다.

An Holistic Framework for Shared Design Leadership alistapart.com

RSS Hunter • 2025년 7월 23일

베타에서 기반으로: 오래가는 제품 만들기

금융 분야 베테랑 제품 개발자인 저자는 유망한 금융 상품들이 과도한 기능으로 인해 실패하는 일반적인 원인을 강조합니다. 저자는 최소 기능 제품(MVP) 접근 방식을 주장하며, 압도적인 기능 세트가 아닌 핵심 기능("기반")에 집중해야 한다고 말합니다. 저자는 사용자의 요구를 이해하고 제품 개발을 그러한 요구에 맞추는 것, 불필요한 복잡성보다 단순성과 신뢰성을 우선시하는 것이 중요하다고 강조합니다. 내부 사업 정치는 종종 핵심 사용자 경험을 무시하고 부풀려지고 혼란스러운 제품으로 이어집니다. "기반"은 잔액 확인과 같은 빈번한 은행 업무에서 볼 수 있듯이 지속적인 가치를 제공하는 필수 기능을 나타냅니다. 기반을 구축하는 것은 장기적인 안정성과 사용자 충성도를 위해 단기적인 이익을 희생할 수도 있는, 무자비한 우선순위 설정을 포함합니다. 성공은 단일 핵심 기능, 반복적인 개발, 그리고 테스트와 관찰을 통한 지속적인 사용자 피드백에 집중하는 명확한 "이유"에 달려 있습니다. 이러한 접근 방식은 처음에는 제한적이지만 궁극적으로 더 성공적이고 지속 가능한 제품으로 이어집니다. 저자는 단순히 예측하는 것이 아니라 반복적인 제품 개발을 통해 미래를 적극적으로 형성하는 것이 중요함을 강조합니다. 결론적으로, 강력한 기반을 구축하면 단기적인 이익보다 장기적인 성공을 보장합니다.

From Beta to Bedrock: Build Products that Stick. alistapart.com

RSS Hunter • 2025년 4월 23일

사용자 조사는 스토리텔링입니다

사용자 연구는 세 가지 구조를 따릅니다: 설정, 갈등, 해결. 기초 연구(1막)는 현재 상태, 도전 과제 및 사용자 기회를 확립합니다. 방향성 연구(2막)는 확인된 문제를 해결하는 디자인을 평가합니다. 마지막 막(해결)은 문제를 해결하고 이해당사자들을 사용자 중심 솔루션으로 이끕니다. 사용자 연구는 디자인을 올바른 궤도에 있도록 유지하고 문제를 강조하며 제품을 경쟁자와 차별화하는 데 필수적입니다. 기초 연구는 사용자와 그들의 요구를 이해하는 기초를 형성하고 방향성 연구는 솔루션이 그러한 요구와 일치하는지 확인합니다. 둘 다 효과적인 사용자 중심 디자인을 위해 필요합니다. 이해당사자들을 참여시키고 연구의 가치를 강조하는 스토리텔링은 중요합니다. 사용성 테스트(2막)는 사용자 상호작용과 생각 과정을 드러내고 기초 연구는 맥락을 제공합니다. 원격 및 현장 테스트는 각각 다른 이점을 제공하는데 원격 세션은 더 넓은 청중에게 도달하고 현장 세션은 더 풍부한 경험을 제공합니다. 조직이 연구를 설득력 있는 스토리로 제시하면 사용자 중심 접근 방식을 육성할 수 있어 더 성공적인 제품을 개발할 수 있습니다.

User Research Is Storytelling alistapart.com

RSS Hunter • 2024년 5월 30일

개인화 실천을 점화하는 방법: 이 예비 개인화 워크숍을 진행하세요

디자인에서 개인화는 제한된 지침이 있어 도전적일 수 있습니다. 성공을 높이기 위해, 개인화 준비도를 평가하고 범위를 정의하며 개발을 계획하는 예개인화 워크숍이 중요합니다. 효과적인 워크숍은 개인화를 우선순위로 하여 팀의 목표를 비즈니스 목표와 일치시킵니다. 개인화 노력은 실험에서 자동화된 기능 및 성숙한 제품으로 점진적으로 진행됩니다. 점진적 개인화 프레임워크는 구조화된 접근 방식을 제공하며 '카드'가 개인화 상호작용의 기본 요소입니다. 예개인화 워크숍의 첫째 날은 개인화 기회를 확인하고 목표를 우선순위로 정하며 잠재적인 장애물을 해결하는 것입니다. 두 번째 단계는 개인화 레시피를 정의하고 문서화하는 데 초점을 맞추어 필요한 재료가 준비되는지 확인합니다. 청중, 콘텐츠, 문맥 및 측정을 고려하면 디자이너는 일관되고 효과적인 개인화 경험을 만들 수 있습니다. 예개인화 프로세스는 개인화 노력이 잘 정렬되고 현실적이며 의미 있는 결과를 제공할 수 있도록 합니다.

To Ignite a Personalization Practice, Run this Prepersonalization Workshop alistapart.com

RSS Hunter • 2024년 4월 16일

웹의 왁스와 웨인

웹은 W3C와 복음주의자들의 노력으로 자유롭고 열린 공간에서 표준화된 플랫폼으로 진화했습니다. 서버 측 언어와 AJAX는 웹 애플리케이션을 가능하게 하였고, 모바일 기기와 반응형 디자인은 상호작용을 확장했습니다. 소셜 미디어는 연결을 중앙화했지만, 프라이버시와 통제에 대한 우려도 증가했습니다. 이제 새로운 전환점이 등장하고 있습니다. 콘텐츠 소유와 분산 도구에 초점을 맞추고 있습니다. 브라우저의 표준 지원은 가속화하고 있지만, 프레임워크에 대한 의존도가 채택과 성능을 저해할 수 있습니다. 웹을 개선하려면 성능, 접근성, 사용자에 대한 최적화, 표준에 기반하여 구축, 세심한 디자인, 지속적인 학습, 실험의 수용이 필수적입니다. 디자이너와 개발자는 지식을 공유하고, 목소리를 증폭시키고, 고유하고 가치 있는 경험을 창조하여 웹을 형성하는 책임이 있습니다. 이를 통해 우리는 더 공정하고 강력한 온라인 환경을 함께 구축할 수 있습니다.

The Wax and the Wane of the Web alistapart.com

RSS Hunter • 2024년 2월 29일

접근성에서 AI의 기회

의심에도 불구하고, AI는 접근성 개선의 가능성을 제공합니다. 컴퓨터 비전 모델은 이미지 설명의 시작점을 제공할 수 있으며, 특수화된 모델은 문맥적으로 관련 있는 이미지를 식별할 수 있습니다. AI는 다양한 장애를 위해 더 접근성이 높은 차트 및 데이터를 이해하는 데 도움이 될 수 있습니다. 다양한 팀에서 개발된 매칭 알고리즘은 편견을 줄이고 장애가 있는 사람들에게 기회를 증가시킬 수 있습니다. AI는 음성 장애가 있는 사람들의 목소리를 보존하고, 비정상적인 음성을 인식하고, 인지 장애를 위해 텍스트를 변환할 수 있습니다. 포괄적인 데이터 세트, 기여에 대한 보상, 다양한 정체성에 대한 감수성은 책임감 있는 AI 개발에 필수적입니다. AI는 초기부터 접근성을 고려하여 장애가 있는 사람들을 위해 해를 줄이는 데 도움이 될 수 있습니다. 그러나 잠재적인 위험을 인정하고 이를 적극적으로 해결하는 것이 중요합니다. AI를 포용성과 의도적으로 접근하면 해를 줄이고 장애가 있는 사람들을 위해 접근성을 향상시킬 수 있습니다.

Opportunities for AI in Accessibility alistapart.com

RSS Hunter • 2024년 2월 7일

저는 크리에이티브입니다.

저자는 창의적인 사람으로, 그들의 과정의 직관적이고 신비한 성질을 강조합니다. 그들은 그들의 아이디어가 그들의 통제를 벗어난 영역에서 비롯된다고 믿습니다. 일부 창의자들은 그들의 작품을 과학의 결과로 본다. 그러나 저자의 경험은 다르며, 알케미와 비슷합니다. 저자는 창의성이 때로는 쉽게 흘러나올 때도 있고 때로는 상당한 노력이 필요할 때도 있다고 인정합니다. 그들의 영감의 불규칙한 성질에도 불구하고, 저자는 그들의 장르에 대한 헌신을 유지하며, 그것이 불확실성과 실망을 포함하는 것임을 인정합니다. 창의자들은 종종 그들이 존경하는 사람들의 업적과 비교하여 그들의 업적을 낮추어 평가합니다. 저자는 그들의 창의적인 약점을 인정하면서 다른 사람들의 엄청난 재능을 존중합니다. 그들은 창의자들이 서로 깊은 연결을 가지고 있으며, 그들의 능력을 인정하고 존중하는 것을 믿습니다. 그들의 자의심에도 불구하고, 저자는 지연의 아드레날린 러시와 실제로 놀라운 작품을 생산할 수 있는 희망에 의해 추동됩니다. 저자는 그들의 작품이 결국에는 결점이 있음을 인정하지만, 다른 사람들의 마음 속에서 일부분이라도 살아남을 수 있는 믿음에 위안을 찾습니다. 저자는 그들의 창의적인 과정을 신뢰하며, 결과가 불확실하더라도 그것이 그들을 이끌 것임을 믿습니다.

I am a creative. alistapart.com

RSS Hunter • 2024년 1월 29일

겸손: 필수 가치

겸손은 디자이너에게 중요한 가치이며, 성취감, 성장, 연결, 참여를 촉진합니다. 디자이너로서 저스틴의 여정은 진화하는 디지털 환경에서 겸손과 호기심의 중요성을 강조합니다. 그는 웹 디자인의 '서부 개척 시대'의 도전을 받아들여 당시의 제약 속에서 창의성을 탐구했습니다. 데스크톱 아이콘의 픽셀 아트에서 영감을 얻은 그는 32x32 픽셀 그리드와 256색 팔레트의 한계 내에서 독특하고 표현력이 풍부한 디자인을 만들었습니다. 저스틴의 디자인은 인정을 받았지만, 외부의 검증을 추구하다 보니 정체기에 빠지고 자신의 핵심 가치를 잃어버리게 되었습니다. 동료들의 피드백 덕분에 그는 자신의 해로운 행동을 인식하고 혁신적인 진로 수정을 거쳐 디자인에 대한 열정과 겸손함을 다시 회복했습니다. 대형 강입자 충돌기 프로젝트는 저스틴의 지속적인 성장을 보여주며 겸손과 협력이 어떻게 매체별 고려 사항을 뛰어넘는 혁신적이고 영향력 있는 디자인으로 이어질 수 있는지 보여주었습니다.

Humility: An Essential Value alistapart.com

RSS Hunter • 2023년 6월 22일

개인화 피라미드: 사용자 데이터로 설계하는 프레임워크

UX 실무자들은 표준화된 접근 방식의 부족으로 인해 개인화된 디지털 경험을 구현하는 데 어려움을 겪고 있습니다. 개인화 피라미드는 이러한 프로그램을 구축하기 위한 전체적인 프레임워크를 제공하는 디자이너 중심 모델입니다. 7단계로 구성되어 있습니다: 북극성(전략적 목표), 목표(측정 가능한 결과), 터치포인트(개인화가 이루어지는 곳), 컨텍스트 및 캠페인(개인화된 콘텐츠), 사용자 세그먼트(고유한 대상), 실행 가능한 데이터(신뢰할 수 있는 데이터 소스), 로데이터(잠재적인 데이터 소스)로 구성되어 있습니다. 이 모델은 사용자 의도를 이해하고, 자사 데이터를 활용하며, 로드맵의 일부로 머신 러닝을 고려하는 것을 강조합니다. UX 디자이너는 이 프레임워크를 사용하여 고객 참여를 향상시키고 비즈니스 목표를 달성하는 개인화된 경험을 만들 수 있습니다.

Personalization Pyramid: A Framework for Designing with User Data alistapart.com

RSS Hunter • 2022년 12월 8일

모바일 우선 CSS: 재고할 때인가?

모바일 우선 CSS 개발은 인기를 끌고 있는 방법론이지만, 스타일 선언을 덮어쓰는 것 때문에 복잡성과 비효율성을 초래할 수 있습니다. 모바일 우선은 모바일 뷰를 우선시하지만, 브레이크포인트 전체에서 동시 개발을 어렵게 만들 수 있습니다.이러한 문제를 해결하기 위해, 특정 브레이크포인트에서만 변경을 허용하는 닫힌 미디어 쿼리 범위를 고려할 수 있습니다. 스타일을 필요한 경우에만 설정하고 덮어쓰는 것을 피하면 복잡성과 회귀 테스트를 줄일 수 있습니다.미디어 쿼리에 기반하여 CSS를 여러 파일로 나누면 브라우저가 다운로드 우선순위를 정할 수 있어 성능이 향상됩니다. 특히 모바일 기기 또는 인터넷 속도가 느린 지역에서 이러한 방법이 특히 유용합니다.Responsively App 또는 Blisk와 같은 도구를 사용하여 브레이크포인트 전체에서 동시 개발을 고려할 수 있습니다. 개발 순서는 선호도에 따라 다를 수 있지만, 공통 스타일과 예외를 확인하는 것이 여전히 필수적입니다.닫힌 미디어 쿼리 범위는 불필요한 스타일 상속 및 덮어쓰기를 방지합니다. 미디어 쿼리에서 max-width를 사용하여 특정 브레이크포인트 내에서만 스타일을 설정할 수 있습니다. 이렇게 하면 의도하지 않은 변경을 방지할 수 있습니다.CSS를 묶는 것인지 나누는 것은 HTTP 버전 및 프로젝트 요구 사항에 따라 다릅니다. CSS를 나누면 다운로드 우선순위를 정할 수 있지만, 구형 브라우저에서는 묶는 것이 더 효율적일 수 있습니다.HTTP/2 또는 HTTP/3은 더 많은 동시 요청을 허용하여 CSS를 나누는 것이 덜 중요해질 수 있습니다. 그러나 여러 브레이크포인트가 있는 프로젝트에서 최적의 성능을 달성하고자 하는 경우에는 여전히 유용합니다.회귀 테스트는 CSS를 나누고 닫힌 미디어 쿼리 범위를 사용하여 최소화할 수 있습니다. 이렇게 하면 변경 사항이 특정 브레이크포인트에만 영향을 미치므로 포괄적인 테스트가 필요하지 않습니다.프로젝트 요구 사항을 신중하게 고려하고 적절한 기술을 사용하면 CSS 개발 프로세스를 효율성, 유연성 및 성능 측면에서 최적화할 수 있습니다.

Mobile-First CSS: Is It Time for a Rethink? alistapart.com

RSS Hunter • 2022년 6월 9일

디자이너, 성공을 먼저 (재)정의하라

일상적인 윤리적 디자인 개념은 사용 가능성, 공정성 및 지속 가능성을 목표로 하는데, 특히 이윤 최적화에 초점을 맞춘 자본주의 체제에서 상당한 장애물에 직면합니다. 현재의 노력은 표면적인 변경, 예를 들어 윤리 도구 키트 공유와 같은 것에 초점을 맞추고 있지만, 실제로는 회사의 목표를 변경하는 데 실패합니다. 디자이너들은 회사의 목표를 변경하여 윤리적 고려 사항, 즉 웰빙, 공정성 및 지속 가능성을 중시하는 방식으로 시스템을 영향을 미쳐야 합니다. 이러한 윤리적 목표를 반영하는 성공 지표를 재정의하는 것이 필요합니다. 고객 만족도와 같은 전통적인 지표에서 벗어나 디지털 웰빙 및 환경 영향을 줄이는 것과 같은 측면에 초점을 맞춥니다. 이러한 새로운 지표를 통해 디자인 선택의 영향을 측정하는 것은 중요합니다. 왜냐하면 이는 비즈니스의 언어와 일치하고, 윤리적 진전을 구체적으로 평가할 수 있기 때문입니다. 분명한 윤리적 목표와 측정 가능한 지표를 설정하면, 윤리적 디자인은 이론적인 개념에서 실제로 실행할 수 있는 목표가 됩니다. 이러한 변화는 전통적인 디자인 성공의 세 가지 차원 (희망성, 실행 가능성 및 가용성)에서 벗어나 네 번째 차원인 윤리적 영향을 받아들이는 것을 요구합니다. 이러한 포괄적인 접근 방식은 디자인을 사용자 요구에만 충족하는 것이 아니라 사회와 지구에 긍정적인 기여를 하게 됩니다. 궁극적으로는 더 지속 가능하고 윤리적인 미래를 이끌게 됩니다.

Designers, (Re)define Success First alistapart.com

RSS Hunter • 2022년 5월 12일

상자에서 벗어나다

CSS는 주로 직사각형 상자 스타일링에 사용되지만 새로운 기능은 디자인의 경계를 확장하고 있습니다. PWA의 창 제어 오버레이 기능은 개발자가 앱 창의 전체, 제목 표시줄 영역 포함하여 이를 활용할 수 있도록 합니다. 이 기능은 제목 표시줄과 창 제어의 물리적 제약을 제거하여 앱의 콘텐츠 위에 이를 오버레이할 수 있습니다. 이 기능을 사용하려면 웹 앱의 매니페스트 파일에 "window-controls-overlay"를 추가하세요. 새로운 CSS 환경 변수, 예를 들어 "titlebar-area-x" 및 "titlebar-area-width",은 제목 표시줄이 있었을 위치에 콘텐츠를 배치하면서 창 제어와 겹치지 않도록 보장합니다. 창 제어 버튼이 콘텐츠를 가리지 않도록 앱의 테마 색상을 콘텐츠 배경 색상과 일치하도록 웹 앱 매니페스트 파일 또는 "theme-color" 메타 태그를 사용할 수 있습니다. 이 기능은 데스크톱 디바이스에서 PWA가 더 몰입감 있고 통합된 경험을 생성할 수 있도록 허용합니다.

Breaking Out of the Box alistapart.com

RSS Hunter • 2021년 12월 9일

UX 리서치를 두 가지 간단한 질문으로 판매하는 방법

이 기사는 UX 디자이너가 사용자 연구를 효과적으로 옹호하는 전략을 제시합니다. 이를 위해 OOUX의 원칙에 기반을 둔 협업 프로세스인 Object Definition Workshop을 진행합니다. 이 워크숍에서는 팀 내부의 지식 격차를 확인하고 이를 해결하는 데 필요한 사용자 연구의 필요성을 강조합니다. 프로세스는 '명사 수렵'으로 시작하여 마케팅 자료, 기존 제품 인터페이스 등 다양한 소스에서 제품과 관련된 잠재적 객체를 확인합니다. 이러한 명사들은 시스템 내부의 주요 요소를 나타내는 것으로 워크숍에서 두 가지 기본 질문을 통해 분석됩니다. "어떤 객체들이 있나요?" 및 "그 객체들 사이의 관계는 무엇입니까?". 이러한 질문을 통해 이해당사자들은 사용자 요구와 제품 기능에 대한 자신의 가정과 불확신을 직면하게 됩니다. 이러한 질문을 통해 열린 토론과 시각적 도구인 객체 맵을 사용하여 시스템의 복잡성을 풀어나가면서 디자인 결함과 일관성 없는 점을 드러냅니다. 이해당사자들이 시스템의 복잡성을 풀어나가면서 사용자 이해의 부족으로 인한 디자인 결함을 확인하게 됩니다. 이렇게 사용자 중심의 디자인 프로세스를 보장하고 최종 제품이 사용자 요구에 맞게 개발되도록 하여 비용이 많이 드는 실수를 방지할 수 있습니다. Object Definition Workshop은 가정과 정보에 기반한 디자인 결정을 잇는 다리 역할을 하며 사용자 연구를 그 중심으로 합니다.

How to Sell UX Research with Two Simple Questions alistapart.com

RSS Hunter • 2021년 10월 21일

콘텐츠 모델은 디자인 시스템이 아니다

미래 지향적인 조직은 다중 채널에서 청중에게 도달하는 옴니채널 콘텐츠 전략을 채택하고 있습니다. 이러한 전략을 위해 콘텐츠 관리 시스템(CMS)에 잘 정의된 콘텐츠 모델이 필수적입니다.콘텐츠 모델은 시각적 표현보다는 콘텐츠의 의미를 반영하는 type과 속성 이름을 사용하여야 합니다. 이렇게 하면 배포 채널이 콘텐츠를 효과적으로 이해하고 사용할 수 있습니다.콘텐츠 모델은 또한 관련 콘텐츠 구성 요소를 연결하여 함께 속하는 콘텐츠가 함께 유지되고 쉽게 관리 및 재사용되도록 합니다.전통적인 디자인 시스템 사고방식은 콘텐츠의 의미와 연결을 고려하지 않고 시각적 표현에 초점을 맞추는 경우 옴니채널 콘텐츠 전략을 방해할 수 있습니다.가장 좋은 콘텐츠 모델은 의미론적이고 관련 콘텐츠를 연결하여 콘텐츠를 표현에서 분리합니다.Schema.org 기반의 구조화된 데이터를 사용하면 검색 엔진 최적화(SEO)를 개선하고 즉각적인 추가 배포 채널이 없어도 혜택을 제공할 수 있습니다.콘텐츠 모델을 디자인에서 분리하면 향후 개선 사항에 대한 적응력이 향상됩니다.이러한 원칙을 따르면 팀은 옴니채널 콘텐츠 전략을 지원하는 효과적인 콘텐츠 모델을 만들 수 있으며 다중 채널에서 청중과 연결할 수 있습니다.잘 정의된 콘텐츠 모델은 사용자 경험을 향상시키고 청중과의 교감을 촉진합니다.콘텐츠는 사용자 경험에서 가장 중요한 자산이고 청중과 연결하는 가장 좋은 방법입니다.

A Content Model Is Not a Design System alistapart.com

RSS Hunter • 2021년 9월 23일

안전을 위한 설계, 일부 발췌

불안전한 기술을 방지하려면 전략적인 접근이 필요합니다. 포괄적 안전 프로세스는 디자이너들이 잠재적인 남용을 확인하고 예방 조치를 마련하며 취약한 사용자를 지원하는 데 도움이 됩니다. 연구에는 잠재적인 무기화의 광범위한 분석과 생존자 및 전문가의 통찰이 포함됩니다. 남용자와 생존자의 고유한 특징은 디자이너들이 그들의 목표와 요구를 이해하는 데 도움이 됩니다. 새로운 남용 사례를 생각하는 것은 해가 될 가능성을 모두 고려하는 것입니다. 솔루션 설계는 남용자의 목표를 방지하고 생존자의 목표를 지원하는 것입니다. 이 프로세스는 유연하고 기존의 디자인 관행에 통합할 수 있습니다. 다양성은 중요하지만, 비윤리적인 기술을 해결하는 데는 충분하지 않습니다. 지속적인 안전 우선순위와 사용자 피드백은 잠재적인 해를 완화하는 데 중요합니다.

Design for Safety, An Excerpt alistapart.com

RSS Hunter • 2021년 8월 26일

지속 가능한 웹 디자인, 발췌

1956년에 로저 밴니스터는 4분 이내에 1마일을 달리는 것이 불가능하다는 믿음을 깼고, 인식된 제한을 깨는 힘을 보여 주었습니다.인간의 신체가 속도에 대한 잠재력을 보여주는 것과 마찬가지로 인터넷의 기능도 표준이 발전함에 따라 확장되고 있습니다.웹사이트의 지속 가능성은 점점 더 큰 관심사로 떠오르고 있지만, 탄소 배출을 직접 측정하는 것은 어려운 일입니다.대신 데이터 전송과 전기 에너지의 탄소 강도가 지표로 사용됩니다.킬로와트시당 기가바이트(kWh/GB)로 측정되는 데이터 전송은 에너지 효율성의 지표입니다.페이지 크기, 즉 웹 페이지의 크기는 데이터 전송을 줄이는 데 있어 특히 중요합니다.이미지의 크기를 줄이는 것이 에너지 소비를 줄이는 데 있어 특히 중요합니다.성능 예산, 즉 속도 제한과 같은 개념은 페이지 로드 시간과 데이터 전송에 대한 상한선을 정합니다.페이지 크기 예산은 업계 벤치마크 또는 경쟁자 분석을 기반으로 설정할 수 있습니다.반복 방문자의 경우 전송 크기를 측정하면 정기 사용자에게 있어 효율성을 최적화하는 데 대한 통찰을 얻을 수 있습니다.킬로와트시당 그램의 CO2(gCO2/kWh)로 측정되는 전기 에너지의 탄소 강도는 에너지 원에 따라 크게 다릅니다.저탄소 강도 지역에 있는 데이터 센터를 선택하면 배출을 줄일 수 있습니다.탄소 강도와 사용자와의 거리를 균형 맞추는 것이 데이터 전송 중 에너지 소비를 최소화하는 데 있어 필수적입니다.데이터 전송과 전기 사용량에 기반하여 탄소 배출을 계산하는 도구들이 있습니다.

Sustainable Web Design, An Excerpt alistapart.com

RSS Hunter • 2021년 8월 5일

음성 콘텐츠 및 사용성

수천 년 동안 인간은 음성 언어에 의존해 왔지만, 최근의 발전으로 인해 기계가 인간의 복잡한 말을 이해하는 음성 인터페이스가 도입되었습니다. 음성 상호작용은 인간의 대화를 반영하여 트랜잭션(결과를 위한), 정보(지식을 위한), 친사회적(연결을 위한)을 아우릅니다. 트랜잭션 음성 상호작용은 직접적이고 효율적인 반면, 정보 제공 음성 상호작용은 보다 탐색적이고 유익한 정보를 제공합니다. 음성 인터페이스는 순수 음성 인터페이스 또는 멀티모달(시각적 지원 포함) 인터페이스가 될 수 있습니다. 대화형 음성 응답(IVR) 시스템이 보편화되었지만 투박하고 불편할 수 있습니다. 시각 장애 사용자를 위해 설계된 스크린 리더는 웹 상호 작용을 위한 음성 기반 대안을 제공하지만 장황하고 사용하기 어려울 수 있습니다. 음성 인터페이스는 스크린 리더에 비해 잠재적인 이점을 제공하지만 고유한 디자인 과제를 안고 있습니다. 음성 인터페이스가 발전함에 따라 디자이너는 사람 말의 뉘앙스와 사용자의 다양한 요구 사항을 고려해야 합니다.

Voice Content and Usability alistapart.com

RSS Hunter • 2021년 7월 29일

예상치 못한 상황에 대비한 디자인

미래의 예측할 수 없는 기기에서 웹 디자인을 하려면 웹 디자인에서 도전 과제가 있습니다. 2010년에 등장한 반응형 디자인은 퍼센트 기반 레이아웃과 미디어 쿼리를 사용하여 다양한 화면 크기에 맞는 콘텐츠를 적응시키는 솔루션으로 등장했습니다. 그러나 미디어 쿼리는 컴포넌트를 특정 뷰포트 크기에 묶어 컴포넌트 재사용을 제한합니다. 브라우저에서 지원되지 않는 현재의 컨테이너 쿼리는 컴포넌트가 부모 컨테이너의 크기에 따라 변경할 수 있도록 하여 실제로 재사용 가능한 컴포넌트를 가능하게 하려는 목표를 가지고 있습니다.Flexbox와 CSS Grid와 같은 CSS 개선 사항은 레이아웃을 혁신시켰고, 컨테이너 행이 필요하지 않게 되었으며 요소들이 필요한대로.WRAP 또는 플렉스할 수 있었습니다. CSS Subgrid는 요소들이 자체 콘텐츠 및 형제 요소의 콘텐츠 변경에 응답할 수 있도록 하여 더 강력한 디자인을 생성합니다.고유 레이아웃은 fr 단위와 고정 및 유연한 단위의 혼합을 사용하여 레이아웃보다 콘텐츠 크기를 우선시하고 모든 공간 및 콘텐츠 변동에 적응할 수 있는 디자인을 가능하게 합니다. 이러한 접근 방식은 컨테이너 쿼리를 사용하지 않고 반응형 컴포넌트를 생성하는 데 있어 상당한 이점을 제공합니다.고유 디자인은 웹 디자인에서 반응형 레이아웃을 반응형 컴포넌트로 설계하는 것을 강조합니다. 이는 새로운 방식으로 기존 CSS 지식을 사용하여 유연하고 적응력이 있는 디자인을 생성하는 것을 의미합니다. 고유 디자인은 웹 디자인에서 또 다른 중요한 순간을 표시하며, 미리 정의된 브레이크포인트에서 벗어나 모든 기기 또는 콘텐츠 시나리오에 응답할 수 있는 레이아웃으로 이동합니다.

Designing for the Unexpected alistapart.com

RSS Hunter • 2021년 7월 15일

비동기적 디자인 리뷰: 피드백을 얻는 것

효과적인 디자인 비평을 위해 구체적인 피드백을 요청하는 것이 중요합니다. 질문은 비평을 지배하여 적절한 단계와 심도에서 검토를 집중하게 합니다. 구체적인 질문을 제공하면 피드백이 더 실행 가능해지며, 비평 경험이 적은 사람들도 더 잘 참여할 수 있습니다. 디자인 반복은 피드백을 위한 자연적인 체크포인트가 됩니다. 목표, 디자인, 변경 사항, 질문이 포함된 반복 포스트는 피드백을 위한 구조화된이고 가시적인 리듬을 생성합니다. 각 포스트에는 프로젝트 목표, 최신 디자인, 이전 반복에서 변경된 사항, 질문이 포함되어야 합니다. 초기에는 탐색적이고, 디자인 프로세스가 진행됨에 따라 더 정제됩니다. 특정 반복 레이블(i1, i2 등)은 고유한 마커를 제공하고 완성의 오해를 방지합니다. 반복 포스트는 또한 디자인 진화와 결정의 기록을 생성합니다. 필수 정보를 반복하여 정렬을 장려합니다. 또한 라이브 비평 또는 인라인 댓글과 같은 피드백 접근 방식은 반복 포스트를 보완할 수 있습니다.

Asynchronous Design Critique: Getting Feedback alistapart.com

RSS Hunter • 2021년 7월 1일

비동기적 디자인 리뷰: 피드백 제공

피드백은 디자인 품질과 개인 성장을 향상시키는 중요한 소프트 스킬입니다. 효과적인 피드백을 제공하려면 분명한 콘텐츠에 초점을 맞추어 "무엇, 어디, 왜, 어떻게?" 측면을 다루어야 합니다. 질문 접근 방식을 사용하여 비판적 생각을 자극하고 피드백의 관점 (사용자, 전문가, 비즈니스 등)을 고려하세요. 존중하고 기반을 둔 피드백은 수용성을 높이고, 타이밍, 태도, 형식은 메시지가 긍정적으로 받아들여질 수 있도록 합니다. 서면 피드백에서는 신뢰할 수 있는 사람이 이를 검토하여 편향을 최소화하세요. 둔갑하지 말고 도전적일 때조차 건설적인 비판을 제공하세요. 마지막으로 피드백은 연습과 자아성찰을 통해 개발할 수 있는 스킬임을 기억하세요.

Asynchronous Design Critique: Giving Feedback alistapart.com

RSS Hunter • 2021년 6월 17일

그건 내 번아웃이 아닙니다

번아웃은 개인마다 다르게 나타나는데, 일부는 '열정적인 번아웃'으로 특징지워지는 증가된 노력과 결의를 경험합니다. 이러한 유형의 번아웃은 책임감과 부족감의 뿌리 깊은 감정에서 비롯되며, 어린 시절의 경험에서 자주 뿌리를 내립니다. 이는 성취를 위해 끊임없이 추구하게 되고, 부정적인 결과에도 불구하고 더 많은 것을 취하고 더 열심히 일하게 됩니다.번아웃은 일반적으로 지연행동과 회피와 관련이 있지만, 열정적인 번아웃은 과로와 지속적인 노력으로 특징지워집니다. 이러한 것은 특히 여성들에게 특히 위험할 수 있습니다. 여성들은 다양한 역할에서 우수해야 하는 사회적 압박을 받기 때문입니다.열정적인 번아웃은 작업 환경에서 종종 보이지 않습니다. 왜냐하면 이러한 것이 긍정적인 특성으로 인식되기 때문입니다. 이러한 인식의 부족은 결국 번아웃이 발생할 때 분노와 실망을 느끼게 됩니다.열정적인 번아웃을 극복하려면 이를 나타내는 증상, 즉 행복감의 감소, '아니'라는 말을 할 수 없는 것, 그리고 자가 관리의 부족을 인지하는 것이 필수적입니다. 번아웃을 해결하는 것은 수면, 영양, 운동, 자연에서 보내는 시간을 포함하는 다각적인 접근 방식을 필요로 합니다.그러나 열정적인 번아웃을 겪고 있는 개인들에게는 자가 관리가 추가적인 부담으로 느껴질 수 있습니다. 이러한 경우에는 자가 관리를 번아웃을 예방하고 다른 사람들을 돌보는 능력을 유지하는 필수적인 단계로 프레임을 짜는 것이 도움이 됩니다.열정적인 번아웃의 주기를 깨뜨리려면 감각을 참여시키고 현재에 집중하는 활동, 예를 들어 정교한 음식을 요리하는 것에 참여할 수 있습니다. 이러한 것은 지속적인 추구에서 필요한 휴식을 제공하고 새로운 관점으로의 전환을 허용할 수 있습니다.

That’s Not My Burnout alistapart.com

RSS Hunter • 2021년 5월 20일

자르기 및 붙여넣기 인격에 주의하세요

"이 사람은 존재하지 않습니다"라는 웹사이트는 AI를 사용하여 실제적이고 믿을 수 있는 가짜 얼굴을 생성하여, 일반적인 디자인 실천인 페르소나 사용의 결점을 강조합니다. 페르소나는 가상 캐릭터를 통해 사용자 유형을 나타내려 하지만, 실제 사용자를 반영하지 못하는 데 실패합니다. 이는 페르소나가 환경 및 상황 요인에 의해 행동이 영향을 받는 것을 무시하는 정적이고 비문맥화된 표현이기 때문입니다. 페르소나는 개별 개인에서 분리된 발견을 결합하여 평균을 생성하는 경우가 많아, 깊이와 실제 관련성이 부족합니다. 디자이너들은 이러한 문제를 보완하기 위해 가상 세부 사항을 추가하지만, 이는 페르소나를 현실에서 더 멀리 떨어뜨리고, Stereotype을 강화합니다. 디자이너들은 페르소나에 의존하는 대신, 실제 개인을 그들의 역동적인 맥락에서 이해하는 데 초점을 맞출 필요가 있습니다. 이를 "Dynamic Selves"라고 하는 접근법입니다. 이 방법은 넓은 그룹에서 표면적으로 데이터를 수집하는 대신, 잘 선택된 개인 샘플을 깊이 있게 연구하는 것입니다. 실제 경험과 동기 부여에 초점을 맞추면, 디자이너들은 디자인 프로세스를 정보하는 더 정확하고 통찰력 있는 정보를 얻을 수 있습니다. 이 접근법은 인간 행동의 유동성과 행동 및 결정에 대한 맥락의 중요한 역할을 인정합니다. 인공 표현에서 실제 세계 이해로 초점을 이동하면, 디자이너들은 더 의미 있고 효과적인 디자인 솔루션을 만들 수 있습니다.

Beware the Cut ‘n’ Paste Persona alistapart.com

RSS Hunter • 2021년 5월 6일