웹디자인 실무(12)
CSS 호버·스크롤 인터랙션 따라 만들기: EALARA 메뉴·버튼·카드 효과 4가지 (코드 포함)
EALARA의 메뉴·버튼 호버와 카드 스크롤 효과 4가지를 블로그 색으로 따라 만들었어요. ::before 크기 전환, position: sticky, 스크롤 값으로 옮기는 짧은 스크립트면 충분해요.
웹디자인에서 일관성과 반복 차이: 같은 말 같지만 다른 두 원칙
일관성과 반복은 같은 말이 아니에요. 반복은 같은 모양을 여러 번 쓰는 시각적인 방법이고, 일관성은 같은 의미와 동작에 같은 규칙을 지키는 원칙이에요.
디자인 시스템이 없어도 컴포넌트 사고가 필요한 이유: 작은 프로젝트에서 시작하는 법
컴포넌트 사고는 화면을 다시 쓰는 부품으로 나눠 생각하는 방식이에요. 디자인 시스템은 그 결과물일 뿐이라, 시스템이 없는 작은 프로젝트에서도 부품으로 생각하면 수정이 쉬워지고 화면이 어긋나지 않아요.
Framer 포트폴리오 사이트 분석: EALARA가 멋져 보이는 디자인 포인트 5가지
EALARA는 사진 스튜디오용 Framer 템플릿이에요. 주황 한 가지 색, 200px 큰 제목, 섹션마다 반복되는 라벨·제목·설명 패턴 덕분에 사진이 많아도 어수선하지 않아요.
Breadcrumb(브레드크럼)이란? 대형 사이트에서 더 중요해지는 이유와 만드는 법
브레드크럼은 지금 페이지가 사이트 어디쯤인지 보여 주는 경로 표시예요. 단계가 깊고 검색으로 중간 페이지에 바로 들어오는 사람이 많은 대형 사이트일수록 길을 잃기 쉬워서 역할이 커져요.
Above the fold란? 스크롤 시대에도 첫 화면이 여전히 중요한 이유
Above the fold는 스크롤 없이 보이는 첫 화면이에요. 사람들은 스크롤을 잘 하지만, 내려갈지 말지는 첫 화면을 보고 정해요. 첫 화면의 역할은 다 담는 게 아니라 아래로 내려가게 만드는 거예요.
카테고리 이름을 잘못 붙이면 UX가 무너지는 이유: 메뉴 이름 짓는 기준 5가지
카테고리 이름은 클릭하기 전에 안에 뭐가 있을지 짐작하는 유일한 단서예요. 이름이 모호하거나 겹치면 사용자는 잘못 들어갔다 나오기를 반복하다가 검색하거나 떠나요.
hierarchy, taxonomy, navigation 차이: 헷갈리는 웹 구조 영어 3개 정리
hierarchy(계층)는 페이지 사이의 위아래 관계, taxonomy(분류 체계)는 콘텐츠를 묶는 기준과 이름, navigation(내비게이션)은 사용자가 실제로 이동하는 길이에요. 셋 다 '사이트 구조'라고 뭉뚱그려 부르기 쉽지만, 각각 다른 질문에 답해요. 계층은…
GNB에 모든 페이지를 넣으면 안 되는 이유: 대형 사이트 메뉴 설계 기준
GNB(Global Navigation Bar)는 사이트의 모든 페이지를 보여 주는 목록이 아니라, 사용자가 가장 먼저 찾는 몇 갈래 길을 보여 주는 표지판이에요. 페이지가 수백 개인 대형 사이트에서 전부 GNB에 넣으면 고를 게 너무 많아져서 오히려 아무것도 못 찾게…