Concept practice
시각적 위계: 먼저 보이는 것을 설계하기
먼저 상황을 판단한 뒤, 설명과 내 예시를 확인해 보세요.
1. 판단하기
화면에서 가장 중요한 행동을 먼저 보이게 하는 방법은?
선택하기 전에는 맞음·틀림을 표시하지 않습니다.
답과 설명 먼저 보기
추천 답: 중요도 차이를 크기·대비로 나누기
맞다. 하나의 주된 초점과 보조 정보의 차이를 의도적으로 만든다.
두 화면의 읽기 순서
2. 비교하고 조작하기
시각적 위계는 크기, 대비, 위치, 간격, 반복을 조절해 정보가 읽히는 순서를 만드는 원리다. 모든 요소를 크게 만드는 것과는 다르다.
첫 사례는 제목·본문·버튼이 같은 크기와 색이라 어디서 시작할지 찾게 한다. 둘째 사례는 제목을 먼저, 한 줄 설명을 다음, 행동 버튼을 마지막으로 구분해 사용자의 다음 시선을 안내한다.
자주 생기는 오해
위계는 큰 글씨만의 문제라는 오해가 있다. 위치와 여백, 색 대비도 읽는 순서를 바꾼다.
눈으로 비교하기
같은 내용에 제목의 힘만 바꿔 보세요
슬라이더는 제목의 크기와 굵기만 바꿉니다. 무엇을 먼저 읽게 되는지 확인해 보세요.
가상 워크숍
AI로 만드는 첫 안내문
10월 15일 · 14:00–16:00
가상 배움센터 2층 · 정원 30명
3. 내 작업에 옮기기
한 장면을 적어 보세요
내 페이지의 제목, 설명, 행동 버튼에 1·2·3 순서를 매기고 차이를 만들 속성 하나를 고르세요.
이 메모는 이 기기와 브라우저에만 저장됩니다. 점수나 이해도는 기록하지 않습니다.
다음 검토
답한 기록과 다시 볼 약속
아직 답을 확인하지 않았습니다. 한 번의 선택은 이해도 점수가 아니라, 다시 살펴볼 출발점입니다.
예시
신청 페이지에서 '이번 주 워크숍'을 큰 제목으로, 날짜를 중간 대비로, '자리 확인'을 분명한 버튼으로 둔다.
함께 적용하기
이 개념을 써 본 기록
직접 적용한 과정과 달라진 점을 적어 보세요. 제출한 기록은 검토 후 공개됩니다.
위 메모에서 공유할 부분을 복사해 다음 작성 화면에 붙여 넣으세요. 적용 기록은 500자까지 작성할 수 있습니다.
아직 공개된 적용 기록이 없습니다. 첫 기록을 남겨 보세요.
더 읽을 자료
다음 개념: 디자인 토큰: 반복되는 선택에 이름 붙이기 →
개념을 썼으면 → S0 첫 빌드
이제 내 아이디어에 적용해 봐요. S0에서 첫 결과물을 만드는 무료 실습을 시작해요.
S0 무료 실습 시작하기 →