리더스현대음악학원 개발기 — 오래된 신뢰를 한 화면에 정리하기

리더스현대음악학원 웹사이트는 유치부부터 예중·예고·음대 입시 전공반까지의 교육과정과 합격 실적, 시설, 공지와 상담 안내를 한곳에 담은 공식 사이트입니다. 화려한 소개보다 방문자가 무엇을 배우고 어떻게 문의할지 빠르게 찾는 구조를 목표로 했습니다.

첫날, 학원 안내의 뼈대를 세웠습니다#

2026년 2월 10일 기본 프로젝트에서 출발해 홈·학원 소개·교육과정·갤러리·공지·상담 페이지를 만들었습니다. 첫 구현부터 각 페이지의 검색 설명과 사이트맵, 모바일 메뉴를 함께 두어 나중에 덧붙이는 부속품이 되지 않게 했습니다. 합격 실적과 과정 안내는 카드 몇 장으로 압축하기보다, 처음 방문한 학부모가 관심 단계에 맞춰 읽을 수 있도록 여러 구간으로 나눴습니다.

주소 하나도 화면에서 직접 확인해야 했습니다#

연락처 페이지에 지도를 붙이는 것만으로 끝나지 않았습니다. 지도 SDK를 불러오는 방식이 실제 브라우저에서 불안정했고, 표시 좌표와 대중교통 안내도 다시 맞춰야 했습니다. 모바일에서는 길찾기로 바로 이어지는 버튼을 따로 두었습니다. 코드가 빌드된다는 사실과 방문자가 정확한 위치에 도착한다는 사실은 전혀 다른 검증이라는 걸 보여 준 부분이었습니다.

클래식한 인상과 읽기 쉬움을 함께#

초기 화면은 이후 흰색·검정·금색을 중심으로 다시 디자인했습니다. 금색을 장식 전체에 쓰기보다 제목과 핵심 행동에 제한하고, 사진은 웹 형식으로 가볍게 바꾸었습니다. 공지·교육과정·갤러리처럼 계속 바뀌는 영역은 화면 코드와 내용을 분리해 갱신하기 쉽게 만들었고, 영상과 이미지가 첫 화면을 늦추지 않도록 로딩 순서도 여러 차례 손봤습니다. 이 과정에서 이모지 장식을 일관된 벡터 아이콘으로 바꾸고, 헤더 글자가 밝은 배경에서 사라지는 문제와 빠져 있던 움직임도 실제 화면을 기준으로 수정했습니다.

지금은#

공식 웹사이트로 공개 운영 중입니다. 이후에도 검색 정보, 구조화된 학원 안내, 모바일 상호작용과 미디어 성능을 점검하며 고쳤습니다. 2026년 8월에는 초기 로딩과 미디어 용량, 메뉴·폼의 상호작용을 다시 검증해 성능을 보완했습니다. 제작 당시의 모든 의사결정이나 운영 내부 사정까지 확인할 수 있는 것은 아니어서, 이 기록에는 저장소에서 검증되는 화면과 변경만 담았습니다. 오래된 신뢰를 새로 꾸미는 것보다 필요한 정보를 정확하고 편하게 전달하는 일을 기준으로 계속 관리하고 있습니다.