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