OptiChallenge의 대회 소개와 참가자 화면
2026-09-20 DanzzaN이 OptiChallenge의 디자인 분석을 요청하고, Codex가 홈·문제 자료·리더보드와 좁은 화면의 구성을 살폈다. 퍼즐 모티프와 큰 제목이 행사 소개를 맡고, 자료 선택과 순위 탐색은 참가자의 작업을 돕는 사례다. 이후 DanzzaN은 이 분석의 증류 계획을 요청하고 실행을 승인했다. 아래의 장점·불편·개선 방향은 Codex의 관찰에 근거한 분석이며, 사이트 스타일에 대한 사용자의 취향이나 개인사이트의 구현 채택을 뜻하지 않는다.
관찰 범위와 출처
외부 원천은 OGC 2026 홈, 문제 자료, 리더보드다. 사이트 디자인의 저자와 최초 게시일은 확인하지 않았다.
브라우저의 개별 화면, 접근성 트리, 렌더링된 DOM과 CSS 값을 함께 확인했다. 1280px 폭에서는 홈·일정·규정·상금과 리더보드의 구성을, 960px에서는 리더보드와 문제 자료의 배치를 살폈다. 390px에서는 홈·공지·모바일 메뉴·문제 자료·일정의 표시와 읽는 순서를 확인했다. 홈의 절 이동, 빠른 이동 메뉴에서 리더보드 열기, 모바일 메뉴 펼침, 홈으로 복귀하기, 공지 하단 버튼과 Escape로 닫기를 실제 조작했다.
한국어 전환, 실제 휴대폰, 스크린리더 사용, 대비 수치, 성능, 동작 감소 환경은 검증하지 않았다. 자료를 내려받아 내용까지 검토하거나 코드 제출 서버를 시험한 분석도 아니다. 대시보드·FAQ는 이동 경로가 있음을 확인했으며 내부 화면은 분석하지 않았다.
일반 판단의 배경으로 기존 인터페이스 판단과 검토 기준 - Jakub Krehel과 그 원천인 레이아웃·타이포그래피를 읽었다. 해당 자료의 수치나 검토 형식을 이 사례의 필수 규칙으로 채택하지 않았다.
주제를 설명하는 통계와 제목
홈은 어두운 회청색 바탕에 코랄·보라·민트를 쓰고, 큰 대회 이름을 단어별로 네 줄에 배치한다. 오른쪽 통계는 상금·참가 국가·팀·참가자 수를 맞물리는 퍼즐 조각으로 표현한다. 문제 개요가 설명하는 조선업의 공간 배치와 시간 계획이라는 주제가 통계의 형태에도 이어진다. 퍼즐은 행사 분위기를 만드는 동시에 규모를 읽게 하는 정보 표현으로 해석할 수 있다.
관찰한 제목의 CSS에는 Space Grotesk가 지정되어 있었다. 1280px에서 글자 크기 88px·굵기 800·행간 83.6px·자간 -3.52px였고, 390px에서는 제목이 48px로 줄면서 네 줄 구성을 유지했다. 이는 선언된 렌더링 값의 관찰이며 실제 로드된 글꼴 파일이나 해당 수치의 최적성을 입증한 결과는 아니다.
제목의 코랄은 #FF7675, 보라는 #6C5CE7, 민트는 #55E6C1였다. 문제 자료 화면의 주 배경은 #2F3640, 개요 본문은 #C9D0DA·15px·행간 27px로 확인했다. 보라색 제목이 코랄·민트보다 배경에서 덜 또렷하다는 평가는 당시 화면의 시각적 판단이다. 대비를 계산하거나 접근성 기준 위반으로 판정하지 않았다.
카드와 버튼에는 직선적인 면과 얇은 테두리를 사용하고, 섹션마다 작은 분류표·큰 제목·내용의 순서를 반복한다. 퍼즐 통계의 굴곡은 이 정돈된 프레임 안에서 특징을 드러낸다. 제목 크기뿐 아니라 줄바꿈, 색의 반복, 정보의 형태가 함께 정체성을 만든다는 분석이다.
소개에서 참가자의 작업으로
홈에는 문제·리더보드·대시보드·FAQ 진입이 있고, 상단의 빠른 이동 메뉴에서도 같은 목적지에 접근할 수 있다. 문제 자료 화면은 다운로드와 변경 이력을 연결하며, 리더보드는 라운드 선택·팀 검색·티어 선택을 제공한다. 소개에서 내부 화면으로 넘어가도 배경과 제목·강조색의 어휘가 이어지면서 화면별 작업 구조가 달라진다.
동시에 홈의 문제·리더보드·대시보드 버튼이 각각 강한 색을 사용한다. 이 표현은 서비스의 여러 입구를 알아보게 하지만, 가장 먼저 할 행동 하나를 두드러지게 하지는 않는다는 평가다. 브랜드를 통일하는 색의 반복과 행동의 우선순위는 별도로 검토할 필요가 있다. 대회 종료 시점에는 최종 결과나 보고서 진입을 더 강하게 보여주는 방향을 제안했으며, 실제 이용자의 선택 속도나 전환율을 측정한 것은 아니다.
종료 상태와 다시 방문하는 흐름
관찰 당시 홈은 “SUBMISSIONS CLOSED”로 제출 종료를 표시했고, 일정 영역도 주요 단계가 모두 끝났다고 안내했다. 같은 홈의 코드 제출 규정에는 “Submissions are now open.”이라는 문구가 남아 있었다. 이 기록이 입증하는 것은 화면의 안내 문구 사이 충돌이며, 제출 서버의 실제 접수 가능 상태는 확인하지 않았다.
행사가 접수·진행·종료로 넘어가면 눈에 띄는 상태 표시뿐 아니라 규정 본문·공지·주요 행동의 표현도 함께 검토해야 한다는 판단으로 이어졌다. 방문 목적이 참가 준비에서 결과 조회로 바뀔 수 있으므로, 첫 화면의 행동 우선순위도 그 시점에 맞춰 재검토할 수 있다.
공지는 첫 진입에서 화면을 덮었다. 하단 버튼으로 닫고 내부 페이지를 둘러본 뒤 홈으로 돌아오자 다시 나타났다. 다시 표시하지 않기 체크박스는 있었으나 켜서 동작을 검증하지 않았다. 390px에서는 긴 공지 아래에 닫기 버튼이 있어 초기 화면에서 보이지 않았고, Escape로는 닫을 수 있었다.
따라서 공지 자체의 중요도와 반복 방문에서의 방해를 함께 살펴야 한다. 핵심 결과를 짧은 상단 공지로 보이고 상세 내용을 펼치도록 바꾸는 것은 이 사례에서 제안한 대안이다. 모든 공지를 모달에서 없애야 한다거나 사용자가 모달을 싫어한다는 결론으로 일반화하지 않는다.
모바일에서 먼저 읽게 되는 정보
390px 홈은 제목의 줄 구성을 유지하면서 버튼을 여러 행으로 배치했고, 퍼즐 통계는 두 열로 표시했다. 문제 자료 화면에서는 설명문이 줄바꿈되고 다운로드 버튼이 세로로 배치됐다. 큰 화면의 그래픽 특징을 좁은 폭에서도 알아볼 수 있게 유지한 사례다.
일정에서는 네 달의 달력이 세로로 이어지고 주요 일정 목록이 그 아래에 놓였다. 좁은 화면 안에 내용이 들어오는 것과 필요한 날짜를 빨리 찾는 것은 다른 문제다. 마감일이나 주요 행사를 조회하는 목적이라면 일정 목록을 먼저 보여주고 달력을 보조로 두는 방향이 적합하다고 평가했다. 달력 자체를 주로 사용하는 목적까지 같은 순서를 강제하는 규칙은 아니다.
반응형 검토는 가로 넘침이나 겹침을 확인하는 데서 끝나지 않고, 화면이 좁아졌을 때 중요한 정보와 행동이 어떤 순서로 나타나는지까지 이어진다. 이 사례의 평가는 읽는 순서와 도달 거리에 관한 것이며 실제 사용자 과제 수행 시간을 측정한 결과는 아니다.
재사용할 판단과 적용 범위
이 사례는 주제에 맞는 정보 표현, 소개와 작업 화면의 목적 차이, 브랜드의 일관성과 행동 우선순위, 단계에 맞는 안내 문구, 재방문과 모바일 읽기 순서를 함께 검토할 근거다. 구체적인 색상값·제목 크기·퍼즐 형태는 이 사이트의 표현 사례로 보존한다.
DanzzaN이 요청한 것은 디자인 분석과 그 증류다. 구현 변경이나 개인사이트에 적용할 스타일을 선택한 기록은 없으므로, 재사용할 판단은 아래의 기존 UI Atomic에 근거와 적용 조건으로 연결한다.