모바일과 다크모드에서 읽기 어려운 부분을 다시 맞췄습니다
이번 작업은 눈에 확 들어오는 새 기능보다, 계속 쓰다 보면 더 크게 느껴지는 정리였습니다. 밝은 화면에서는 괜찮아 보여도 다크모드에서 글자가 약해지거나, 작은 화면에서 버튼과 푸터가 갑자기 붙어 보이면 전체 완성도가 바로 떨어집니다. 특히 초성 퀴즈처럼 문제, 힌트, 점수, 결과를 계속 읽는 콘텐츠는 색 하나보다 읽는 피로가 더 중요했습니다.
모바일에서 결과를 읽을 때 글자와 카드가 덜 피곤하게 보이고, 다크모드에서도 중요한 내용이 더 잘 읽힙니다. 콘텐츠를 끝낸 뒤에도 화면이 갑자기 끊기지 않고 자연스럽게 이어집니다.
다크모드는 색을 뒤집는 기능이 아니라 읽기 조건입니다
어두운 화면에서는 같은 색도 다르게 보입니다. 밝은 화면에서 부드럽던 카드가 다크모드에서는 너무 하얗게 튈 수 있고, 밝은 화면에서 차분하던 보조 문장이 어두운 배경에서는 거의 안 보일 수 있습니다.
그래서 결과 제목, 설명, 통계, 버튼처럼 실제로 읽고 누르는 부분을 기준으로 다시 보았습니다. 배경이 예쁜지보다 먼저, 사용자가 문제를 읽고 선택지를 누르고 결과를 이해할 수 있는지가 중요했습니다.
10대 독자는 밤에 휴대폰으로 들어올 가능성이 큽니다. 침대에 누워 다크모드로 퀴즈를 풀 때 글자가 흐리면, 콘텐츠가 어렵지 않아도 금방 피곤해집니다. 이번 업데이트는 그런 작은 피로를 줄이는 쪽에 가까웠습니다.
결과 버튼은 예쁜 색보다 역할이 먼저 보여야 했습니다
결과 화면에서 저장 버튼은 가장 중요한 행동 중 하나입니다. 하지만 콘텐츠마다 색이 너무 다르거나 예전 스타일이 남아 있으면 사이트가 덜 정리돼 보입니다. 어떤 버튼이 저장이고, 어떤 버튼이 공유인지 한 번 더 생각하게 만드는 것도 문제였습니다.
각 콘텐츠의 고유 색은 유지하되, 버튼의 크기와 무게는 비슷하게 맞췄습니다. 사용자는 동물 테스트를 하든, 초성 퀴즈를 하든, 오늘의 긁?을 하든 저장, 공유, 처음으로 돌아가기의 역할을 쉽게 알아볼 수 있어야 합니다.
이런 정리는 화려하지 않습니다. 하지만 친구에게 결과를 보내려는 순간에는 버튼의 이름과 위치가 훨씬 크게 느껴집니다. 결과가 마음에 들었는데 저장 버튼을 찾느라 흐름이 끊기면, 좋은 결과 문장도 금방 식습니다.
끝나는 지점도 읽는 경험의 일부였습니다
콘텐츠가 끝나자마자 푸터가 붙으면 급하게 마무리된 것처럼 보입니다. 반대로 너무 큰 빈 공간이 있으면 아직 뭔가 로딩 중인 것처럼 보일 수 있습니다. 모바일에서는 이 차이가 데스크톱보다 더 크게 느껴집니다.
그래서 콘텐츠 안내, 다른 콘텐츠 추천, 푸터가 이어지는 거리를 다시 보았습니다. 사용자가 끝까지 내려도 화면이 자연스럽게 닫히고, 더 볼 콘텐츠가 있으면 조용히 이어지는 느낌을 목표로 했습니다.
업데이트 노트와 블로그 글도 마찬가지입니다. 글을 다 읽은 뒤 참고 자료, 다음 콘텐츠, 푸터가 갑자기 붙으면 기사처럼 읽히던 흐름이 관리 화면처럼 끊깁니다. 이번 작업은 작은 화면에서 끝까지 읽는 사람을 기준으로 다시 본 정리였습니다.
초성 퀴즈는 이 기준을 확인하기 좋은 화면이었습니다
초성 퀴즈는 한 번 누르고 끝나는 화면이 아닙니다. 문제를 보고, 힌트를 열고, 답을 떠올리고, 결과를 확인하는 일을 여러 번 반복합니다. 그래서 한 번 보기에 괜찮은 색보다, 반복해서 봐도 피곤하지 않은 대비가 더 중요했습니다.
힌트 버튼이 너무 약하면 막힌 사람이 도움을 못 찾고, 점수와 결과가 너무 세면 문제 풀이보다 결과 장식이 먼저 보입니다. 이번 업데이트는 그런 균형을 작은 화면에서 다시 맞춰본 작업이었습니다.
밝은 화면과 어두운 화면에서 다시 본 읽기 조건
모바일에서 다시 본 세 가지 읽기 조건
글자 대비
밝은 화면에서는 괜찮던 회색 글자가 다크모드에서 배경에 묻히거나, 반대로 카드가 너무 하얗게 튀는 순간
제목, 설명, 점수, 힌트처럼 반복해서 읽는 요소는 장식 색보다 먼저 읽히게 둡니다.
버튼 무게
저장, 공유, 다시 하기 버튼이 콘텐츠마다 너무 다른 톤으로 보이면 어떤 행동이 중요한지 흐려지는 순간
콘텐츠 고유 색은 살리되, 결과 뒤 행동의 크기와 순서는 비슷하게 유지합니다.
끝나는 여백
본문이 끝나자마자 푸터가 붙거나, 반대로 빈 공간이 길어져 아직 로딩 중처럼 보이는 순간
추천, 안내, 푸터가 너무 급하지도 너무 멀지도 않게 닫히는 거리를 맞춥니다.
출처
- 막막한연구소 업데이트 노트 목록공개 업데이트 기록의 날짜, 제목, 요약, 변경 흐름을 확인하는 1차 기준.
- 막막한연구소 콘텐츠 목록업데이트 노트에서 언급한 테스트, 퀴즈, 실험실 콘텐츠의 현재 공개 상태를 확인하는 기준.
조금 더 남겨 두는 이야기
일부 결과 화면은 다크모드에서 글자가 너무 약하게 보이거나, 반대로 카드가 너무 하얗게 튀어 보였습니다. 특히 점수와 결과를 읽는 구간은 대비가 중요했습니다.
저장 버튼 색이 콘텐츠마다 다르게 남아 있는 곳도 있었습니다. 어떤 화면은 예전 그라데이션 느낌이 남아 있어 사이트 전체 색 흐름과 맞지 않았습니다.
콘텐츠가 끝난 뒤 안내 영역과 푸터가 만나는 거리도 일정하지 않았습니다. 어떤 곳은 너무 붙고, 어떤 곳은 너무 길게 비어 보였습니다.
초성 퀴즈와 플러팅 결과 화면처럼 오래 내려보는 곳의 글자 대비를 다시 확인했습니다. 다크모드에서도 제목, 설명, 통계가 잘 읽히도록 색을 정리했습니다.
결과 저장 버튼은 각 콘텐츠의 고유 색을 쓰되, 과한 그라데이션이나 예전 색이 남아 보이지 않게 맞췄습니다. 저장, 공유, 처음으로 돌아가기의 무게도 다시 보았습니다.
콘텐츠 아래 안내 영역과 푸터 사이의 여백을 다시 점검했습니다. 너무 갑자기 끝나지 않게 하되, 의미 없이 긴 빈 공간처럼 보이지 않는 기준을 잡았습니다.
다크모드는 색 반전이 아니라 밤에 휴대폰으로 읽는 조건까지 포함한 화면입니다.
결과 화면 버튼은 콘텐츠마다 색이 달라도 저장, 공유, 다시 하기의 역할과 무게가 같아야 합니다.
푸터 전 여백은 페이지의 끝 인상을 정하므로 너무 짧아도, 너무 길어도 완성도가 떨어져 보입니다.
새 결과 화면을 만들 때는 밝은 화면과 다크모드를 함께 확인하겠습니다.
저장 이미지와 화면용 결과 UI가 서로 너무 다르게 보이지 않는지 계속 보겠습니다.
푸터 전 여백은 페이지마다 따로 감으로 잡지 않고 공통 기준에 맞춰 보겠습니다.