Web Design Atlas / 웹 디자인 용어와 시각 예시

다음 표현을 구현해 주세요. 패럴랙스 / Parallax. 전경과 배경이 다른 속도로 움직인다. 장식 이미지의 깊이 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 스크롤 줌 / Scroll zoom. 스크롤에 맞춰 확대한다. 그림의 세부 요소 강조. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 이미지 시퀀스 / Image sequence. 스크롤에 따라 순서대로 이미지를 바꾼다. 단계별 형태 변화. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 페이드인 / Fade-in. 투명한 상태에서 서서히 나타난다. 요소의 등장 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 슬라이드인 / Slide-in. 위치를 이동하며 나타난다. 요소의 진입 방향 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 스태거 / Stagger. 여러 요소를 시간차로 표시한다. 항목 순서 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 텍스트 리빌 / Text reveal. 문자열을 아래에서 위로 드러낸다. 짧은 제목 등장. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 마스크 리빌 / Mask reveal. 보이는 영역을 넓혀 내용을 드러낸다. 그림과 사진 등장. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 블러인 / Blur-in. 흐린 상태에서 선명해진다. 짧은 등장 효과. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 타이프라이터 / Typewriter. 글자를 한 자씩 표시한다. 짧은 메시지 순차 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 카운트업 / Count-up. 숫자가 목표값까지 증가한다. 수치 결과 강조. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 스크롤 연동 / Scroll-linked animation. 스크롤 진행도에 따라 표시가 바뀐다. 읽는 위치를 진행 막대로 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 스티키 / Sticky. 영역 안에서 요소가 같은 위치에 머문다. 스크롤하는 설명 옆에 그림 유지. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 스크롤 스냅 / Scroll snap. 스크롤 후 구획 위치에 맞춰 정렬된다. 카드를 한 장씩 비교. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. SVG 선 그리기 / SVG line draw. 선을 시작점부터 차례로 그린다. 경로와 연결 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 마키 / Marquee. 문자열이 가로로 흐른다. 짧은 장식 문구 반복. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 스케일 인 / Scale-in. 작은 요소가 커지며 나타난다. 카드 등장 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 회전 진입 / Rotate-in. 기울어진 요소가 회전하며 나타난다. 짧은 장식 등장. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 3D 플립 / 3D flip. 카드가 축을 중심으로 입체적으로 회전한다. 면 방향 변화 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 원형 리빌 / Circular reveal. 원형 영역을 넓혀 내용을 드러낸다. 중심에서 이미지 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 텍스트 채우기 / Text fill. 글자 안쪽을 순서대로 색으로 채운다. 짧은 제목 진행 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 모션 패스 / Motion path. 정해진 경로를 따라 요소가 이동한다. 경로나 단계 흐름 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 도형 모핑 / Shape morphing. 꼭짓점을 움직여 도형의 형태를 바꾼다. 두 형태의 대응 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 색상 전환 / Color transition. 배경색을 다른 색으로 서서히 바꾼다. 구간 전환 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 호버 리프트 / Hover lift. 가리키거나 포커스하면 요소가 떠오른다. 조작 가능한 위치 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 포커스 링 / Focus ring. 포커스된 조작 대상을 테두리로 표시한다. 키보드 조작 위치 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 아코디언 / Accordion. 제목을 조작해 내용을 열고 닫는다. 필요할 때 보충 정보 읽기. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 탭 / Tabs. 선택한 제목에 해당하는 내용으로 바꾼다. 같은 위치에서 정보 전환. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 그리드 / Grid. 항목을 행과 열에 맞춰 배치한다. 비슷한 항목 비교. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 벤토 그리드 / Bento grid. 크기가 다른 구획을 조합한다. 기능별 정보량 조절. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 분할 화면 / Split screen. 화면을 두 영역으로 나눈다. 설명과 그림 비교. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 비대칭 레이아웃 / Asymmetric layout. 좌우 너비와 위치를 다르게 한다. 주요 요소 강조. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 여백 / Whitespace. 요소 주변에 공간을 남긴다. 정보 묶음 구분. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 에디토리얼 레이아웃 / Editorial layout. 큰 제목과 단 구성을 조합한다. 읽는 순서 안내. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 메이슨리 배치 / Masonry layout. 높이가 다른 항목을 세로로 쌓는다. 이미지 목록 비교. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 겹침 배치 / Overlapping layout. 요소를 겹쳐 배치한다. 중심과 보조 정보의 관계 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 풀 블리드 / Full-bleed layout. 이미지나 배경을 영역 끝까지 확장한다. 사진의 인상을 크게 전달. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 카드 배치 / Card layout. 관련 정보를 카드별로 묶는다. 항목 단위를 명확히 표시. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 글래스모피즘 / Glassmorphism. 반투명 패널 뒤 배경이 흐리게 보인다. 보조 패널 겹치기. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 뉴모피즘 / Neumorphism. 밝고 어두운 그림자로 요철을 표현한다. 장식 패널에 부드러운 입체감. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 네오브루탈리즘 / Neo-brutalism. 굵은 테두리와 어긋난 그림자를 쓴다. 뚜렷한 구분과 존재감. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 그라데이션 / Gradient. 색을 연속적으로 변화시킨다. 배경과 강조색에 변화. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 듀오톤 / Duotone. 밝고 어두운 영역을 두 색으로 바꾼다. 이미지 색감 통일. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 아웃라인 타이포그래피 / Outline typography. 글자의 윤곽만 그린다. 짧은 장식 제목. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 부드러운 그림자 / Soft shadow. 흐린 그림자로 높이를 표현한다. 조작 가능한 면 구분. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 그레인 질감 / Grain texture. 미세한 입자로 표면 질감을 더한다. 배경의 단조로움 완화. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 메시 그라데이션 / Mesh gradient. 여러 색을 면 안에서 부드럽게 섞는다. 배경에 색의 확장 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.

다음 표현을 구현해 주세요. 하프톤 / Halftone. 점의 배열로 명암을 표현한다. 인쇄 같은 질감 표현. 대상과 계기를 지정하세요. 스크롤 연동 효과는 페이지 안의 위치와 스크롤 양에 따라 바뀌고 위로 돌아가면 되감기게 하세요. 본문은 항상 읽을 수 있게 하고 320px 화면과 키보드를 지원하세요. 동작 줄이기에서는 완성된 정지 화면을 보여 주세요.