모바일 메뉴와 로그인 화면을 개선했어요

작은 화면에 맞게 이용 흐름을 바꿨어요

모바일에서는 화면 상단의 메뉴 버튼을 누르면 현재 페이지 위에 별도의 메뉴 창이 열립니다. 페이지가 갑자기 다른 위치로 이동하지 않고, 열려 있는 화면의 맥락을 유지한 채 원하는 메뉴를 선택할 수 있습니다.

메뉴 창에는 런조아 로고와 안내 문구를 함께 표시해 어떤 창을 열었는지 쉽게 알 수 있도록 했습니다. 메뉴를 선택하거나 창을 닫으면 원래 보던 화면으로 자연스럽게 돌아갑니다.

각 항목은 손가락으로 누르기 편한 높이와 간격을 적용했습니다. 키보드로 서비스를 이용하는 경우에도 현재 선택 위치가 드러나도록 포커스 스타일을 제공하며, 메뉴의 아이콘은 글자만으로 구분하기 어려운 항목을 빠르게 인식하도록 돕습니다.

런조아를 이동 중에도 편리하게 이용할 수 있도록 모바일 메뉴와 로그인 화면을 새롭게 정리했습니다. 좁은 화면에 많은 항목을 작게 나열하는 대신, 지금 필요한 기능을 분명하게 구분하고 손쉽게 선택할 수 있는 구조에 집중했습니다.

이번 개선은 메뉴의 위치만 바꾼 것이 아니라 작은 화면에서 탐색하고 선택하는 전체 과정을 단순하게 만드는 데 목적이 있습니다.

대회 탐색과 관련된 네 가지 주요 메뉴는 한 줄씩 배치해 메뉴 이름과 역할이 충분히 보이도록 정리했습니다.

기존처럼 작은 버튼을 여러 칸에 나누어 표시하지 않아 긴 메뉴 이름이 잘리거나 선택 영역이 좁아지는 문제를 줄였습니다. 아이콘, 메뉴명과 충분한 여백을 한 줄 안에 배치해 각 기능을 더 분명하게 구분할 수 있습니다.

주요 메뉴 아래에는 구분선을 두고 런조아의 콘텐츠 메뉴를 별도로 배치했습니다. 대회를 찾는 기능과 서비스 소식을 읽는 기능이 섞이지 않으면서도 같은 메뉴 창에서 바로 이동할 수 있습니다.

공지사항, 블로그, 업데이트와 뉴스레터의 네 가지 분류를 제공하며, 각 항목을 선택하면 해당 소식 목록으로 이동합니다. 서비스 운영 안내가 필요할 때는 공지사항을, 새롭게 달라진 기능이 궁금할 때는 업데이트를 선택하면 됩니다.

로그인 버튼을 누르면 페이지 안에서 별도의 로그인 창이 열립니다. 이메일 주소와 비밀번호를 직접 입력하는 양식 대신 Google, 카카오와 네이버 계정 중 원하는 방식을 선택할 수 있도록 화면을 단순화했습니다.

로그인 창에는 다음 내용을 함께 제공합니다.

로그인 창은 메뉴보다 위에 표시되도록 화면의 겹침 순서를 조정했습니다. 페이지의 스티키 헤더나 하위 네비게이션이 로그인 창을 가리는 문제 없이 현재 해야 할 작업에 집중할 수 있습니다.

메뉴와 로그인 창뿐 아니라 세부 페이지의 제목, 설명, 버튼과 여백도 작은 화면에 맞춰 조정했습니다. 긴 문장은 화면 너비에 맞춰 자연스럽게 줄바꿈되고, 가로 공간이 부족한 페이지 네비게이션은 필요한 항목을 옆으로 이동해 확인할 수 있습니다.

대화상자가 열린 동안에는 배경에 투명도와 흐림 효과가 적용됩니다. 현재 선택해야 하는 창은 또렷하게 유지하면서 기존 페이지와 시각적으로 구분해, 작은 화면에서도 메뉴와 콘텐츠가 뒤섞여 보이지 않도록 했습니다.

모바일 메뉴의 화면 구성과 각 페이지로 이동하는 기능은 사용할 수 있습니다. 로그인은 Google, 카카오와 네이버 방식을 선택할 수 있는 화면을 먼저 준비한 상태이며, 실제 계정 인증과 회원 기능은 제공 준비가 끝나는 순서에 따라 연결할 예정입니다.

로그인 기능이 정식으로 적용되기 전에는 버튼을 선택해도 인증이 완료되지 않을 수 있습니다. 실제 이용 가능 시점과 제공되는 회원 기능은 이후 업데이트 글에서 별도로 안내하겠습니다.

모바일 환경에서 메뉴가 보이지 않거나 화면을 이용하기 어려운 부분을 발견했다면 고객지원의 불편신고를 통해 사용한 기기와 브라우저, 문제가 발생한 화면을 알려주세요. 확인 후 더 편리하게 이용할 수 있도록 개선하겠습니다.

이번 개선은 메뉴의 위치만 바꾼 것이 아니라 작은 화면에서 탐색하고 선택하는 전체 과정을 단순하게 만드는 데 목적이 있습니다.

대회 탐색과 관련된 네 가지 주요 메뉴는 한 줄씩 배치해 메뉴 이름과 역할이 충분히 보이도록 정리했습니다.

로그인 창에는 다음 내용을 함께 제공합니다.