콘텐츠마다 달라도 같은 사이트처럼 보이게 만든 기준
막막한연구소의 콘텐츠는 일부러 서로 다른 얼굴을 가집니다. 내 안의 동물 찾기는 따뜻한 성향 테스트이고, 플러팅이야 아니야?는 장난스러운 판결 놀이입니다. 한글 초성 퀴즈는 직접 맞히는 퀴즈이고, 이래도 고른다고?는 조건이 붙는 선택 게임입니다. 문제는 각자 다르게 보이면서도 같은 사이트 안에 있다는 느낌을 잃지 않는 일이었습니다.
같은 종류는 같은 뼈대를 쓰게 했습니다
이미지와 설명을 먼저 보여주는 테스트형 콘텐츠는 한 가지 뼈대에 가깝게 맞췄습니다. 사용자는 대표 이미지를 보고, 제목과 설명을 읽고, 바로 시작 버튼을 누릅니다. 이 순서가 같으면 콘텐츠가 달라도 덜 낯섭니다.
주제를 고르는 콘텐츠도 마찬가지입니다. 한글 초성 퀴즈와 이래도 고른다고?는 주제를 누르면 바로 시작하는 방식이므로, 선택 카드의 크기와 위치가 비슷해야 합니다. 한쪽만 클릭된 카드처럼 보이면 기능이 오래된 것처럼 느껴질 수 있습니다.
다른 점은 색과 말투에 남겼습니다
모든 콘텐츠를 완전히 같은 화면으로 만들면 관리 화면처럼 보일 수 있습니다. 그래서 색과 말투는 콘텐츠의 성격에 맞게 남겼습니다. 플러팅은 법정 느낌, 초성은 퀴즈 느낌, 동글동글 게임은 부드러운 게임 느낌을 유지했습니다.
대신 버튼의 크기, 제목의 무게, 설명의 길이, 카드 간격은 같은 기준으로 맞췄습니다. 사용자는 새로운 콘텐츠를 열어도 어디를 눌러야 하는지 바로 알 수 있고, 그래도 각 콘텐츠의 분위기는 다르게 느낄 수 있습니다.
다크모드도 새로 보는 기준에 넣었습니다
다크모드에서 글자가 잘 안 보이거나, 어떤 결과 카드만 너무 하얗게 뜨면 사이트의 완성도가 바로 떨어져 보입니다. 특히 결과 화면은 오래 내려보는 곳이라 대비가 더 중요합니다.
이번 정리는 밝은 화면만 기준으로 보지 않고 어두운 화면에서도 버튼, 결과 카드, 안내 문구가 읽히는지 함께 보는 방향으로 잡았습니다. 예쁜 색보다 먼저 읽히는 색이 필요했습니다.
서로 다른 콘텐츠가 같은 사이트 안에 놓이는 장면
같게 둔 것과 다르게 둔 것
테스트 시작 화면
대표 이미지, 제목, 짧은 설명, 시작 버튼 순서
동물 테스트는 따뜻하게, 플러팅은 판결 놀이처럼 보이게 둡니다.
주제 선택 화면
카드 크기와 선택 행동을 비슷하게 정리
초성은 퀴즈감, 밸런스 게임은 선택의 흔들림을 살립니다.
결과 화면
저장, 공유, 다시 하기의 위치와 무게
각 콘텐츠의 색과 말투는 결과 카드 안에 남깁니다.
출처
- 막막한연구소 제작 노트 목록공개 제작 노트의 현재 목록, 제목, 설명, 연결 흐름을 확인하는 1차 기준.
- 막막한연구소 콘텐츠 목록노트에서 언급한 테스트, 퀴즈, 실험실 콘텐츠의 공개 진입 흐름을 확인하는 기준.
읽고 나면 좋은 포인트
- 같은 종류의 콘텐츠는 같은 시작 구조를 쓰면 방문자가 덜 헤맵니다.
- 색과 말투는 콘텐츠별 개성을 남기는 쪽에 쓰고, 버튼과 간격은 공통 규칙을 따릅니다.
- 다크모드는 나중에 덧붙이는 모드가 아니라 처음부터 같이 봐야 하는 화면입니다.