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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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