Canvas 디자인 개선 예시 · 2026.09.21

시안을 먼저 보고,
작동하는 화면까지.

같은 판단 시트를 새롭게 구성했습니다. 내용과 계산은 유지하고, 기준·입력·결과의 위치와 모바일 사용성을 다듬었습니다.

개선된 판단 시트 직접 써보기 →

데스크톱 전후

흩어진 가중치를 왼쪽에 모으고, 채점표와 결론을 한 영역으로 연결했습니다.

기존

기존 판단 시트 데스크톱 화면
가중치가 위쪽에서 여러 줄로 나뉘는 구성.

개선

왼쪽 가중치와 오른쪽 채점 및 결론으로 구성한 개선 화면
기준 → 채점 → 결론을 이어 읽는 구성. 캡처는 요약 복사 성공 직후 상태입니다.

휴대폰 크기에서

같은 390px 화면입니다. 기존 표는 화면 밖으로 넘쳤습니다. 개선본은 항목 이름이 붙은 입력 카드로 바뀝니다.

기존

390px 화면보다 표가 넓어 가로로 넘치는 기존 화면
전체 페이지 캡처에 가로로 넘친 부분도 포함되어 있습니다.

개선

390px 폭 안에서 모든 입력 항목과 점수를 표시하는 개선 화면
320px까지 가로 넘침 없이 입력과 결과를 확인했습니다.

이제 Canvas가 따라갈 순서

1. 방향을 먼저

실제 내용에 맞는 시안이나 참고 화면을 먼저 고릅니다. 선택을 맡겼다면 추천안을 골라 진행합니다.

2. 구체적으로 수정

“더 예쁘게” 대신 시선 순서, 여백, 한글 줄바꿈, 강조와 입력 크기를 고칩니다.

3. 눈과 손으로 확인

구현 화면을 시안과 비교하고, 모바일·키보드·저장·복사 등 실제 사용을 확인합니다.

처음 만든 두 시안 보기
왼쪽 밝은 녹색 A안과 오른쪽 파란색 B안 디자인 제안
A안을 선택했습니다. 시안의 장식은 줄이고, 초기화보다 요약 복사를 앞에 두었습니다. 생성 이미지는 방향 참고용이며 실제 기능과 글자는 HTML로 구현했습니다.