눈에 익은 화면이 주는 안정감

많은 휴식 앱은 사용자를 완전히 다른 분위기로 데려갑니다. 그것이 필요한 순간도 있지만, 업무 중간에는 다시 돌아오는 비용이 커질 수 있습니다. Refresheet는 반대로 사용자가 이미 알고 있는 화면 문법을 사용합니다. 메뉴, 탭, 셀, 상태 표시줄은 모두 업무 도구에서 자주 본 요소입니다.

그리드의 역할

그리드는 정보를 안정적으로 담는 구조입니다. 사용자는 어디를 눌러야 할지, 어떤 영역이 주요 콘텐츠인지 빠르게 파악할 수 있습니다. Refresheet의 게임과 안내 페이지도 이 구조를 바탕으로 배치되어 있어 낯선 화면을 해석하는 부담을 줄입니다.

또한 그리드는 게임 결과와 랭킹을 과장하지 않고 보여주기에 좋습니다. 점수는 재미를 위한 정보이지만, 사용자의 하루를 평가하는 지표처럼 느껴져서는 안 됩니다. 그래서 Refresheet는 차분한 색과 작은 강조를 사용합니다.

색과 타이포그래피

기본 색은 업무 도구에서 자주 보이는 녹색과 회색 계열을 사용합니다. 강조가 필요한 버튼이나 상태에는 색을 쓰지만, 화면 전체가 한 가지 감정으로만 읽히지 않도록 배경은 밝고 단순하게 유지합니다. 글자는 장식적인 폰트보다 읽기 쉬운 시스템 폰트를 우선합니다.

스프레드시트 화면이지 특정 제품의 화면은 아닙니다

Refresheet가 참고하는 것은 행과 열, 셀, 리본 메뉴, 시트 탭이라는 스프레드시트라는 화면 형식 자체이지, 특정 회사의 제품이 아닙니다. 로고, 브랜드 명칭, 색 배합, 아이콘 세트를 그대로 가져오지 않고, 격자와 탭이라는 구조만 재해석했습니다. 화면 안 어디에도 특정 오피스 소프트웨어의 이름이나 상표를 표기하지 않는 것도 같은 이유입니다. 목적은 특정 제품처럼 보이게 하는 것이 아니라, 대부분의 사무직 사용자가 이미 익숙한 "표 형태의 화면 문법"을 빌려오는 것입니다.

왜 완전히 새로운 게임 앱으로 만들지 않았나

짧은 휴식을 위한 방법은 이미 많습니다. 그런데 새 앱을 설치하거나 낯선 UI를 새로 배우는 과정 자체가 피로할 때가 있습니다. Refresheet는 "또 하나의 앱"이 아니라 "이미 열려 있던 화면의 연장"처럼 느껴지길 원했습니다. 그래서 별도의 랜딩 페이지나 화려한 온보딩 대신, 곧바로 시트 탭을 눌러 게임에 들어가는 구조를 택했습니다. 이 선택에는 트레이드오프도 있습니다 — 처음 보는 사용자에게는 "이게 뭘 하는 서비스인지" 설명이 부족하게 느껴질 수 있어서, 파일 탭 안내 페이지들(이 페이지를 포함한 소개/가이드/FAQ)로 그 설명을 보완하고 있습니다.

모바일과 데스크톱은 다른 화면입니다

데스크톱에서는 실제 엑셀 작업처럼 넓은 시트 캔버스와 여러 열이 유지됩니다. 하지만 같은 레이아웃을 좁은 모바일 화면에 그대로 축소하면 글자가 너무 작아지고 탭을 누르기 어려워집니다. 그래서 파일 안내 페이지처럼 읽는 것이 중심인 화면은 모바일에서 뷰포트 폭에 맞춘 세로 스크롤 레이아웃으로 완전히 다르게 그려지고, 게임/시트 캔버스는 데스크톱 비율을 유지한 채 확대·축소로 대응합니다. "하나의 디자인을 모든 화면에 욱여넣기"보다 "화면마다 알맞은 레이아웃 규칙을 따로 두기"를 원칙으로 삼고 있습니다.

바뀐 것과 바뀌지 않은 것

초기에는 캐릭터가 걷는 영역과 카드/차트 영역의 지형 계산을 각 기능마다 따로 구현했습니다. 그 결과 발이 바닥에 살짝 뜨거나 파고드는 미세한 불일치가 반복적으로 발생했고, 이후 모든 지형 계산을 하나의 공용 모델로 통합했습니다. 반대로 걷기 속도, 점프 거리처럼 캐릭터의 "성격"에 해당하는 부분은 코드를 정리하는 과정에서도 의도적으로 건드리지 않았습니다. 구조는 정리하되, 느낌은 유지하는 것이 원칙입니다.

서비스와 광고의 균형

광고가 표시되더라도 핵심 조작을 가리거나 게임 진행을 방해하지 않는 위치가 중요합니다. Refresheet는 사용자가 콘텐츠를 읽고 기능을 이해할 수 있는 구조를 먼저 유지하고, 광고는 그 흐름을 해치지 않는 보조 영역에 두는 것을 원칙으로 합니다.