jonbeo 님의 블로그

다크모드는 이제 선택이 아니라 기본 옵션이 되었습니다.스마트폰, OS, 웹브라우저까지 모두 다크모드를 지원하죠. ✅ 이번 포스팅에서는CSS 변수(:root)미디어 쿼리(prefers-color-scheme)JS 토글 버튼을 조합해 실무형 다크모드 시스템을 완성해보겠습니다 ⚙️🧱 1. CSS 변수 기반 색상 시스템 만들기 :root { --bg-color: #ffffff; --text-color: #222222; --accent-color: #007bff;}body { background-color: var(--bg-color); color: var(--text-color);}a { color: var(--accent-color);} 📌 장점색상 교체가 단 1줄로 가능다크모드뿐 아니라 다른 ..

사용자는 마우스뿐 아니라 키보드(Tab, Enter, Space),심지어 스크린리더로도 웹사이트를 탐색합니다. 하지만 HTML 구조가 잘못되어 있거나,포커스가 사라지는 UX를 제공한다면 접근성 점수는 0점 😭 이번 포스팅에서는 실무에서 자주 쓰이는키보드 네비게이션 UX 설계 원칙과 실무 예제를 정리합니다.⌨️ 1. Tab 키 순서 제어모든 인터랙티브 요소는 기본적으로 Tab 키로 접근 가능합니다. 로그인회원가입 📌 Tab 순서는 HTML 구조 순서에 따릅니다.따라서 DOM 순서 = 시각적 순서로 유지하는 것이 중요합니다.⚙️ tabindex 속성 포커스 가능프로그램만 포커스 가능 값 설명 0Tab 순서에 포함됨-1Tab으로는 접근 불가 (스크립트로만 접근)📌 tabindex="0"은 커스텀 UI ..

애니메이션은 단순한 시각 효과를 넘어서 사용자 상호작용과 브랜드 아이덴티티를 표현하는 중요한 요소입니다.하지만 구현 방식에 따라 성능, 유지보수, 확장성에서 큰 차이가 발생합니다.🧩 1. CSS 애니메이션✅ 특징transition, @keyframes을 활용브라우저 최적화 지원 → GPU 가속 덕분에 부드럽게 동작간단한 효과에 적합 (페이드 인/아웃, 슬라이드 등)📌 예시: 버튼 호버 애니메이션 button { background: #007bff; transition: background 0.3s ease;}button:hover { background: #0056b3;}📌 예시: 로딩 애니메이션 @keyframes spin { to { transform: rotate(360deg); }}...

웹사이트나 앱을 만들 때,바로 개발에 들어가지 않고 **와이어프레임(Wireframe)**과 **프로토타입(Prototype)**을 먼저 제작합니다.이 과정은 프로젝트의 사용자 경험(UX) 설계, 화면 흐름 정의, 팀 커뮤니케이션에 핵심적입니다.🧾 1. 와이어프레임 vs 프로토타입와이어프레임 (Wireframe)👉 흑백 또는 단순한 박스 형태로 화면의 기본 구조를 잡는 단계 (기능 중심)프로토타입 (Prototype)👉 실제 서비스처럼 클릭, 이동이 가능한 시뮬레이션 (UX 중심)📌 정리하면, 와이어프레임은 설계도, 프로토타입은 **체험 가능한 목업(Mockup)**입니다.🖌️ 2. 대표 도구 비교✅ Figma (가장 인기 있는 도구)클라우드 기반 → 설치 필요 없음무료 요금제도 강력협업 기능 ..

안녕하세요 😊UI/UX 디자인 도구인 Figma는 다양한 플러그인을 통해 기능을 확장할 수 있습니다.올바른 플러그인을 선택하면 작업 속도와 효율이 크게 향상됩니다.이번 글에서는 실무에서 자주 쓰이는 Figma 플러그인 5개를 추천드리겠습니다.📍 1. Unsplash – 고품질 무료 이미지 삽입기능: Unsplash의 무료 스톡 이미지를 바로 Figma에 삽입장점: 상업적 이용 가능, 검색 기능 제공활용 예시: 목업 제작, 배너 디자인, 프레젠테이션 시안📌 설치: Figma → Plugins → "Unsplash" 검색📍 2. Iconify – 100,000개 이상의 아이콘 라이브러리기능: 다양한 스타일의 아이콘을 검색·삽입 가능장점: Material Icons, Font Awesome 등 통합 제..

Figma는 웹 기반의 UI/UX 디자인 툴로, 디자이너와 협업자 모두에게 직관적인 인터페이스를 제공합니다.그중에서도 Clipping Mask(클리핑 마스크)는 이미지나 요소를 특정 도형 안에 가두거나 잘라서 표현하고자 할 때 매우 유용하게 사용되는 기능입니다.이번 포스팅에서는 Clipping Mask의 개념과 만드는 방법, 그리고 실전 활용 예제를 차례대로 정리해보았습니다.Clipping Mask란 무엇인가요?Clipping Mask는 지정된 도형의 영역 안에 콘텐츠를 가두는 기능입니다.Photoshop의 레이어 마스크와 유사한 개념으로, 사용자가 선택한 도형 안에서만 콘텐츠가 표시되도록 도와줍니다.예를 들어 원형 도형을 기준으로 사진을 원형으로 잘라서 보여주고 싶을 때, Clipping Mask를 적..