01 / PROJECT / CASE STUDY

익숙한 서비스를, 더 편안한 화면으로.

서비스의 연속성을 지키고,
이용의 흐름을 정돈하다.

부곡컨트리클럽

노후한 ASP 기반 홈페이지의 화면 구조를 개선하고 중장년층의 정보 접근성을 고려한 반응형 UI를 구성했습니다.

PERIOD: 2026.01 — 2026.02
ROLE: 화면 설계 및 디자인, 퍼블리싱
COMPANY: 엠플러스어플리케이션
TYPE: Website Renewal / Responsive UI & Web Publishing

02 / PROJECT OVERVIEW

오래된 화면에서, 사용자가 찾는 정보부터.

2000년대 초반에 제작된 ASP 기반 홈페이지는 약 1000px 내외의 제한적인 화면 너비와 밀집된 UI를 사용하고 있었습니다. 기존 서비스의 화면 구조와 콘텐츠를 이해한 뒤 넓어진 레이아웃과 반응형 디자인을 적용했습니다.

중장년층 사용자가 이용 안내와 예약 관련 정보를 찾기 쉽도록 정보 우선순위, 글자 크기, 버튼과 콘텐츠 사이의 간격을 정리했습니다. 담당 범위는 화면 설계·디자인·퍼블리싱이며 ASP 백엔드나 실제 예약 시스템 연동은 포함하지 않습니다.

KEY CONTRIBUTIONS

기존 ASP 홈페이지의 화면 구조 리뉴얼
중장년층 사용자를 고려한 UI 설계
반응형 레이아웃 및 서브페이지 퍼블리싱
예약 캘린더 및 7일 날씨 정보 UI 설계·퍼블리싱
그늘집 메뉴 HTML/CSS 전환

03 / CHALLENGES & SOLUTIONS

익숙함을 지키면서, 불편함을 줄이는 네 가지 질문.

기존 서비스의 구조와 운영 제약을 이해하고, 화면에서 개선할 수 있는 부분을 구체화했습니다.

밀집된 정보를 어떻게 다시 읽히게 할까?

Challenge: 제한된 화면 너비와 오래된 UI 안에 콘텐츠가 밀집되어 있었습니다.
Approach: 기존 서비스의 정보 구조를 이해한 뒤 주요 정보와 부가 정보의 우선순위를 재정리했습니다.
Implementation: 화면 폭과 콘텐츠 간격을 넓히고 클럽·코스·이용·예약·회원 안내를 구분해 메인과 서브페이지를 퍼블리싱했습니다.

부곡컨트리클럽 데스크톱·태블릿·모바일 목업 — 같은 서비스의 화면을 다양한 너비로 구성

중장년층이 필요한 정보를 편하게 찾으려면?

Challenge: 이용 안내와 예약 관련 정보를 빠르게 찾을 수 있는 명확한 화면 구성이 필요했습니다.
Approach: 글자 크기, 정보 밀도와 버튼의 구분을 함께 고려하고 화면 너비에 따라 읽는 순서를 조정했습니다.
Implementation: 내비게이션, 콘텐츠 구획, 반응형 배치를 설계했습니다. PC 메가메뉴와 모바일 아코디언으로 같은 정보에 접근하도록 구성했습니다.

운영 조건이 바뀌면, 만든 UI는 어떻게 구분할까?

Challenge: 예약 캘린더와 7일 날씨 UI를 설계했지만 최종 운영 화면에서는 두 영역이 제외되었습니다.
Approach: 설계·퍼블리싱 결과와 실제 운영 기능을 명확히 구분하고, 변경된 운영 요구사항을 기록했습니다.
Implementation: 예약 캘린더와 7개 날짜·아이콘·기온·풍속으로 구성한 날씨 UI를 정적 데모에 구현했습니다. 예약 현황과 잔여 일자를 외부에 공개하지 않기로 해 캘린더는 운영에서 제외됐고, 날씨 영역의 제외 이유는 확인되지 않았습니다. 실제 예약 백엔드·날씨 API를 개발한 것은 아닙니다.

정적 데모의 7일 날씨 UI — 디자인·퍼블리싱 시안 / 실제 운영 미반영 · API 연동 없음

한 장의 메뉴 이미지를 수정 가능한 콘텐츠로.

Challenge: 그늘집 메뉴가 하나의 이미지로 제공되어 내용 수정과 관리에 제약이 있었습니다.
Approach: 메뉴의 제목·설명·가격을 HTML 콘텐츠로 분리하고 시각적 구분을 CSS로 표현했습니다.
Implementation: 그늘집 페이지의 식사·안주·음료 메뉴를 HTML/CSS로 구성했습니다. 메뉴 변경 시 이미지 전체를 다시 만드는 대신 해당 텍스트와 스타일을 수정할 수 있도록 했습니다.

04 / DESIGN & IMPLEMENTATION

운영의 제약을 구분하고, 화면의 근거를 남기다.

01 / RESPONSIVE UI

같은 정보, 서로 다른 화면

주요 서비스와 콘텐츠가 PC·모바일에서도 같은 맥락으로 읽히도록 화면을 구성했습니다.

02 / UNRELEASED UI

예약 캘린더와 7일 날씨

날짜 셀과 예약 관련 링크, 날짜별 날씨 아이콘·기온·풍속을 화면 요소로 퍼블리싱했습니다. 아래 캡처는 정적 UI 작업물이며 실제 예약·날씨 서비스의 구현이나 운영 반영을 의미하지 않습니다.

실제 운영에 반영되지 않은 예약 캘린더 UI — 운영 미반영 시안 / 예약 시스템 연동 없음

실제 운영에 반영되지 않은 7일 날씨 UI — 운영 미반영 시안 / 날씨 API 연동 없음

03 / MAINTAINABLE CONTENT

이미지 대신 HTML로 관리하는 메뉴

sub3_3.html의 .meal과 .meal-item 구조에 메뉴명·설명·가격을 텍스트로 배치했습니다. 콘텐츠와 표현을 분리해 내용 변경에 대응할 수 있도록 했습니다.

HTML과 CSS로 구성된 그늘집 식사 메뉴 화면 — 실제 그늘집 페이지 캡처 / 텍스트 기반 메뉴

05 / OUTCOME & REFLECTION

기존 서비스와 운영 조건을 이해하는 화면 설계.

기존 서비스의 연속성을 유지하면서 정보 접근성과 콘텐츠 유지보수성을 고려한 리뉴얼 프로젝트입니다.

만든 UI가 모두 운영에 반영되는 것은 아니라는 점을 경험하며 설계 결과와 운영 제약을 구분해 설명하는 중요성을 배웠습니다. 사용자 테스트나 정량 성과를 측정한 프로젝트로 소개하지 않습니다.

06 / EXPLORE PROJECT

직접 살펴보세요.

퍼블리싱 데모 보기 ↗Featured Work로 돌아가기 ↗

정적 데모에는 운영에 반영되지 않은 예약·날씨 UI가 포함됩니다.

서비스의 연속성을 지키고,이용의 흐름을 정돈하다.