ARIA를 처음 배울 때 알았더라면 좋았을 것들
웹 접근성의 핵심인 ARIA는 단순한 속성 추가가 아니라, 의미와 상태를 올바르게 전달하는 것이 중요해요. 실제 보조 기술로 테스트하는 것이 필수! ARIA의 숨겨진 역사와 실수하기 쉬운 포인트, 그리고 올바른 사용법을 알아보세요.
ARIA를 처음 배울 때 알았더라면 좋았을 것들
웹 접근성의 핵심인 ARIA는 단순한 속성 추가가 아니라, 의미와 상태를 올바르게 전달하는 것이 중요해요. 실제 보조 기술로 테스트하는 것이 필수! ARIA의 숨겨진 역사와 실수하기 쉬운 포인트, 그리고 올바른 사용법을 알아보세요.
JavaScript와 CSS로 '이동하는 하이라이트' 내비게이션 바 만들기
이 글에서는 JavaScript와 CSS만으로 내비게이션 바에 '이동하는 하이라이트' 효과를 구현하는 두 가지 방법을 소개해요. View Transition API를 활용한 최신 애니메이션 기법도 다루니, 웹 UI에 생동감을 더하고 싶다면 꼭 읽어보세요!
SVG path
요소 완전 정복: 선 그리기 명령어 이해하기
SVG에서 path
요소는 복잡한 도형을 그릴 때 필수! 이 글에서는 M
, L
, H
, V
, Z
등 직선 경로 명령어를 쉽게 설명해요. 여러 선을 한 번에 그릴 수 있는 복합 경로도 소개하니, SVG를 더 똑똑하게 써보고 싶다면 꼭 읽어보세요!
협업: 아무도 말하지 않는 가장 과소평가된 UX 역량
진짜 UX의 힘은 혼자가 아닌 협업에서 나옵니다! 다양한 팀원과의 소통, 아이디어 공유, 그리고 AI와의 조화까지—협업이야말로 성공적인 UX의 핵심입니다. 팀워크가 어떻게 더 나은 디자인을 만드는지 궁금하다면 꼭 읽어보세요!
스매싱 애니메이션 4편: SVG 최적화의 모든 것
SVG 애니메이션을 빠르고 간편하게 만드는 최적화 비법을 소개합니다! 레이어 구조화, 코드 정리, 재사용 요소 활용 등 실전 팁과 함께 요기 베어 에피소드 예시로 재미있게 설명해요. SVG로 생동감 넘치는 디자인을 완성해보세요!
디자이너가 디테일에 집착하는 이유와 벗어나는 방법
디자이너가 왜 사소한 부분에 집착하게 되는지, 그리고 어떻게 하면 효율적으로 큰 그림에 집중할 수 있는지 알려드려요. 완벽주의, 잘못된 문제 해결, 피로감 등 흥미로운 심리적 요인과 실전 팁을 함께 소개합니다!
신경다양성을 위한 디자인
신경다양성을 고려한 디자인은 모두를 위한 더 나은 웹 경험을 만듭니다. ADHD, 난독증 등 다양한 특성을 가진 사용자를 위해 초기부터 접근성을 고민하면, 창의성과 공감이 살아있는 인터페이스를 만들 수 있어요! 포용적 디자인의 비밀을 알아보세요.
여름의 서막 (2025년 6월 월페이퍼 에디션)
전 세계 아티스트들이 직접 디자인한 여름 맞이 월페이퍼 30여 종을 소개합니다! 자연, 여행, 취미, 우정 등 다양한 테마와 함께, 창의력과 자유로움이 가득한 작품들을 감상해보세요. 특별한 월페이퍼로 일상에 새로움을 더해보는 건 어떨까요?
2025년, 서드파티 쿠키 차단을 확실하게 감지하는 방법
2025년 웹 환경에서 서드파티 쿠키 차단을 어떻게 감지할 수 있을까요? 다양한 브라우저별 차이와 최신 감지 기법, 그리고 실패 없는 사용자 경험을 위한 대체 전략까지! 앞으로의 웹 프라이버시 변화에 대비하는 꿀팁을 알아보세요.
UX에서 데이터, 발견, 인사이트의 차이점
이 글은 데이터, 발견, 인사이트의 차이를 쉽게 설명하며, UX에서 어떻게 데이터를 인사이트로 바꿔 비즈니스 기회를 찾는지 알려줍니다. 통계적 유의성보다 실질적인 패턴과 사용자 경험에 집중하는 것이 중요하다는 점이 흥미롭습니다!
젠과 오토바이 관리술이 웹디자인에 주는 교훈
이 글은 예술과 과학의 조화, 품질의 추구, 그리고 마음챙김이 웹디자인에 어떻게 적용될 수 있는지 소개합니다. 기술을 인간의 자아로 바라보는 관점이 흥미로우니, 창의적이고 깊이 있는 웹 개발에 관심 있다면 꼭 읽어보세요!
스매싱 애니메이션 3편: SMIL은 죽지 않았다, 아직 살아있다!
SMIL 애니메이션이 여전히 SVG에서 강력하게 쓰이고 있다는 사실, 알고 계셨나요? CSS로는 불가능한 복잡한 모션과 동기화, 그리고 경량화까지! 구글의 지원 연장으로, 지금도 SMIL로 멋진 SVG 애니메이션을 만들 수 있어요.
90일 만에 완성하는 디자인 시스템
디자인 시스템을 90일 만에 구축하는 실전 전략과 도구를 소개합니다. 초기 대화와 이해관계자 참여가 성공의 열쇠! 실무에 바로 적용할 수 있는 Figma 템플릿과 워크시트도 함께 제공되어, 팀의 협업이 훨씬 쉬워집니다.
실용적인 UX 전략 프레임워크 구축하기
이 글은 UX 팀이 조직 내에서 주도권을 갖고 가치를 증명할 수 있도록 돕는 실용적인 전략 프레임워크를 소개합니다. 진단, 정책 수립, 실행 계획의 3단계 접근법과, 조직 문화에 UX를 녹여내는 방법까지 흥미롭게 다룹니다!
아이디어를 줄이면 창의력이 커진다: 색다른 창의성 접근법
아이디어가 많을수록 오히려 창의력이 막힐 수 있다는 사실, 알고 계셨나요? 이 글은 집중과 제한, 그리고 다른 분야에서의 영감이 진짜 혁신을 이끈다는 점을 흥미롭게 설명합니다. 창의적 사고의 새로운 비법을 만나보세요!
스매싱 애니메이션 2편: CSS 마스킹으로 차원이 다른 애니메이션 만들기
이 글은 CSS 마스킹을 활용해 웹 애니메이션에 입체감과 영화 같은 효과를 더하는 방법을 소개해요. 비트맵, 벡터, 그라디언트, SVG 등 다양한 마스크 기법과 코드 예시로 창의적인 디자인 팁을 알려줍니다. 마스킹으로 웹에 새로운 재미를 더해보세요!
디자인 시스템에 로컬라이제이션 통합하기
SAS 디자이너들이 글로벌 사용자를 위해 로컬라이제이션에 최적화된 디자인 시스템을 만든 경험을 소개합니다. Figma 변수와 디자인 토큰을 활용해 언어별 레이아웃, 폰트, RTL 지원 등 다양한 문제를 해결한 노하우가 궁금하다면 꼭 읽어보세요!
Penpot에서 네이티브 디자인 토큰으로 디자인과 코드를 하나로!
Penpot가 W3C 표준을 따르는 네이티브 디자인 토큰을 지원해 디자이너와 개발자 협업이 훨씬 쉬워졌어요! 토큰으로 테마와 브랜드를 자유롭게 관리하고, 앞으로 API 연동까지 기대할 수 있답니다. 오픈소스라 더 매력적이에요!
스매싱 애니메이션 1편: 고전 만화가 현대 CSS에 주는 영감
고전 만화의 애니메이션 기법이 어떻게 현대 CSS 애니메이션에 영향을 주는지 알아봐요! 배경 스크롤, 프레임 루프, 접근성까지, 실전 예시와 함께 웹에 생동감을 더하는 비법을 소개합니다. 만화처럼 웹을 움직여볼까요?
CSS의 메이슨리 레이아웃: Grid의 진화 vs. 새로운 모듈의 등장?
CSS에서 메이슨리 레이아웃을 구현하는 방법을 두고 논쟁이 뜨겁습니다. Grid 확장, 독립 모듈, 그리고 Apple의 Item Flow 제안까지! 앞으로 CSS에서 Pinterest 스타일 레이아웃을 쉽게 쓸 수 있을까요? 흥미진진한 변화가 기대됩니다.