read: fail

웹과 네이티브 앱을 연결하는 4가지 덜 알려진 자바스크립트 API

이 기사에서는 PWA(진보적 웹 앱) 의 기능을 강화할 수 있는 네 가지 덜 알려진 자바스크립트 API를 소개합니다. 스크린 방향, 기기 방향, 진동, 연락처 선택 API 등이 있으며, 이들은 웹 앱이 네이티브 앱처럼 더욱 풍부한 경험을 제공할 수 있게 돕습니다. 하지만, 브라우저 지원이 완벽하지 않아 개발자는 사용 전 주의가 필요합니다.

T-형 디자이너와 V-형 디자이너

디자이너 채용 시, 'T-형' 디자이너는 한 분야의 전문가로서 인접 분야에 대한 폭넓은 이해를 갖추어야 한다고 강조합니다. 반면, 'V-형' 디자이너는 경계를 넘나들며 혁신을 이끌 수 있는 가치를 지니고 있습니다. 이 글은 고용주와 구직자 모두가 디자인 역할에 있어 유연하고 개방적인 태도를 가져야 한다고 조언하며, V-형 디자이너가 세우는 새로운 연결고리의 중요성을 강조합니다.

디자이너를 위한 유용한 이메일 뉴스레터

디자이너를 위한 이메일 뉴스레터는 다양한 디자인 주제에 대한 통찰력, 영감, 자원을 제공합니다. 디자인 & 프론트엔드, UX, UX 글쓰기 & 콘텐츠 전략, 사용자 연구, 상호작용 디자인, 디자인 시스템 & 피그마, 정보 구조, 제품 디자인, 윤리적 디자인 & 지속 가능성, AI, 비즈니스, 경력 & 리더십 등의 주제를 다룹니다.

2페이지 로그인 패턴과 그 해결 방안

2페이지 로그인 패턴은 사용자가 이메일을 먼저 입력하고 비밀번호를 입력하도록 유도하는 점점 흔해지는 방식입니다. 이 방식은 SSO 인증을 위해 사용되지만, 비SSO 사용자에게는 불편을 줄 수 있습니다. 대안으로, 이메일과 비밀번호를 한 페이지에서 입력받고 SSO 활성화 여부를 자동 감지하여 사용자 경험을 개선하는 방안이 제시됩니다.

CSS 컨테이너 스타일 쿼리의 활용도는?

CSS 컨테이너 쿼리는 개발자들이 뷰포트 크기가 아닌 요소의 컨테이너 크기나 스타일에 따라 스타일을 적용할 수 있게 해줍니다. 특히, 새로운 스타일 쿼리는 CSS를 더욱 모듈화하고 유지보수하기 쉽게 만들어주지만, 일부는 불필요한 복잡성을 추가한다고 주장합니다.

UX의 향기: 아직 실현되지 않은 후각 디자인의 잠재력

향기는 우리의 기분, 행동, 그리고 기억에 강력한 영향을 미칩니다. 브랜드들은 독특한 정체성을 만들기 위해 향기를 사용하며, 가상 현실 게임이나 교육 분야에서도 후각의 활용이 탐구되고 있습니다. 기술이 발전함에 따라, 디지털 경험에 향기를 통합할 가능성이 커지고 있어, 이는 후각 디자인의 미개척 영역을 탐색하는 흥미로운 주제입니다.

2024년 구글 라이트하우스 점수를 해킹하는 방법

구글 라이트하우스는 웹 페이지의 성능, 접근성, SEO, 최적의 관행을 평가하는 효과적인 도구입니다. 하지만, 실제 사용자 데이터가 중요하며, 라이트하우스 점수를 '해킹'하는 방법도 있지만, 이는 반드시 좋은 사용자 경험을 의미하지는 않습니다. 실제 사용자 경험에 초점을 맞추는 것이 웹 성능을 향상시키는 최선의 방법입니다.

유용한 CSS 팁과 기술

CSS는 컨테이너 쿼리, 캐스케이드 레이어, CSS 중첩, :has 선택자, 그리드와 서브그리드, 새로운 색상 공간 등 새로운 기능들로 더욱 강력해졌습니다. 이 글에서는 CSS의 우선 순위와 특정성을 설명하고, CSS 변수를 이용한 해결책, hanging-punctuation 속성의 부작용 해결 방법 등을 다룹니다. 또한, CSS 기술을 향상시킬 수 있는 Smashing 이벤트와 워크숍 정보도 제공합니다.

이해관계자에게 UX 연구 및 디자인 제시: 설득의 힘

UX 연구 결과와 디자인 개념을 이해관계자에게 효과적으로 전달하는 것은 UX 실무자가 실제 영향을 미치는 데 중요합니다. 호블랜드-예일 모델은 설득적 커뮤니케이션을 이해하는 데 도움을 주며, 소스, 메시지, 그리고 청중의 세 가지 독립 변수에 중점을 둡니다. 이 글은 UX 실무자들이 설득력 있게 연구와 디자인을 제시할 수 있는 구체적인 방법과 팁을 제공합니다.

성공적인 확장을 위한 핵심 통찰과 실용적인 조언

사용자 중심성, 데이터 기반 의사결정, 지속적인 개선, 그리고 협업과 포용성을 중시하는 마인드셋이 성공적인 확장의 핵심입니다. 기술 선택, 접근성 통합, 성능 최적화 기술, 그리고 포괄적 접근성을 고려한 설계는 조직의 장기적 성장을 위해 필수적입니다.

기본의 찬사

웹 개발의 기본인 HTML과 CSS는 종종 간과되지만 매우 중요합니다. 많은 도구와 프레임워크가 기본 학습의 필요성을 추상화하고 있지만, Geoff Graham은 여전히 웹 개발 학습의 최고의 출발점이라고 주장합니다. 그는 기본을 가르치기 위해 'TheBasics.dev'라는 코스를 만들었습니다.

아이스크림을 향해! (2024년 6월 월페이퍼 에디션)

스매싱 매거진의 월간 데스크탑 월페이퍼 시리즈 최신판을 소개합니다. 2024년 6월을 맞이하여, 12가지 독창적이고 영감을 주는 디자인이 포함되어 있습니다. 달력이 있는 버전과 없는 버전 모두 제공되며, 창의적인 자유를 강조하며 새로운 달의 시작에 신선한 영감을 제공합니다.

UI 컴포넌트를 위한 의사결정 트리

이 기사는 UI 컴포넌트의 디자인 결정을 문서화하기 위해 의사결정 트리를 사용하는 방법에 대해 다룹니다. Doctolib, Workday, Lyft 등 여러 디자인 팀의 실제 예시를 통해, 의사결정 트리가 디자인 프로세스문서화를 개선하는 데 어떻게 도움이 되는지 설명합니다.

플랫폼 프리미티브의 시대가 드디어 도래하다

넷플라이와 같은 서버리스 플랫폼들이 제공하는 플랫폼 프리미티브는 개발자들이 사용자 경험에 집중할 수 있게 해주며, 이미지 CDN, 캐싱, 키/값 저장소 등을 포함합니다. 이러한 도구들은 개발 생산성을 높이고 서버리스 풀스택 경험을 가능하게 합니다.

HTML의 최신 컨트롤, 스위치 소개

최근 Safari가 새로운 HTML 스위치 컨트롤을 지원하기 시작했습니다. 이 컨트롤은 switch 속성을 사용하며, ::thumb::track 같은 새로운 가상 요소로 스타일링이 가능합니다. 개발자들은 이를 통해 맞춤형 스위치 디자인을 자유롭게 만들 수 있습니다. 하지만 아직 일관된 지원과 접근성 문제가 있어 주의가 필요합니다.

디자인 토큰, 컴포넌트, 변수 등의 명명법에 대한 최고의 실천 방법

디자인 토큰, 색상, UI 컴포넌트, HTML 클래스, 변수 등을 명명하는 것은 종종 어려울 수 있습니다. 이 글은 명명법을 간소화하는 방법, 영감을 주는 자료, 그리고 유연한 디자인 토큰 분류법 예시를 제공합니다. 또한, 관련 온라인 워크숍과 컨퍼런스도 추천하고 있어 디자인 시스템에 대해 더 깊이 있게 배울 수 있는 기회를 제공합니다.

현대 CSS 레이아웃: 프레임워크가 필요 없을 수도 있습니다

이 글에서는 CSS 프레임워크 없이 유연하고 설정 가능한 레이아웃을 만들 수 있는 네 가지 CSS 유틸리티 클래스를 소개합니다. 캐스케이드 레이어, CSS 변수, 컨테이너 쿼리 등의 현대 CSS 기능을 활용하여 맞춤형 레이아웃을 구현하는 방법을 설명합니다.

UX에서 숨기기 대 비활성화

UX 디자인에서 숨기기비활성화는 사용자에게 혼란을 줄 수 있습니다. 비활성화는 사용자에게 해당 기능이 존재하지만 사용할 수 없음을 알리는 반면, 숨기기는 현재 관련 없는 기능을 제거합니다. 중요한 것은 사용자가 UI를 학습할 수 있도록 돕고, 불필요한 옵션은 제거하지 말아야 합니다. 이러한 방법으로 사용자의 혼란과 좌절을 방지할 수 있습니다.

사용자 세분화 매트릭스 구축으로 조직 간 협력 강화

많은 조직들이 고객 중심보다는 내부 구조와 서비스에 중점을 두고 있습니다. 이 문서는 사용자 세분화 매트릭스를 사용하여 부서 간의 협력을 강화하고 고객의 요구를 우선시하는 방향으로의 전환을 제안합니다. 이는 팀과 부서 간에 공유된 사고방식을 만들어 더 나은 의사결정과 협업을 가능하게 합니다.

CSS 미디어 쿼리를 넘어서

미디어 쿼리는 반응형 웹 디자인에 필수적이었지만, 한계가 있습니다. 최신 CSS 기능들인 Flexbox, Grid, 반응형 단위, 수학 함수 등은 더 유연하고 맥락을 고려한 레이아웃을 가능하게 합니다. 새로운 기능인 컨테이너 쿼리는 뷰포트가 아닌 컨테이너 요소의 크기에 따라 스타일을 적용할 수 있습니다. 이러한 현대적인 도구들을 활용하여 더 나은 반응형 경험을 제공해야 합니다.