Selected work
업종도, 방문자도 다른 두 홈페이지입니다. 누가 어떤 마음으로 들어오는지부터 정리하고, 그 답을 화면에 담았습니다.
아이의 속도를 믿는 학원 홈페이지
과정·수강료·후기·상담을 학부모 눈높이에서 정리한 초등 영어학원 홈페이지입니다. 레벨별 과정 지도와 수강료 계산기로 상담 전 궁금증을 미리 풀어 줍니다.
부모님을 맡기는 마음까지 헤아린 병원 홈페이지
진료과·시설·병원 생활을 보호자의 언어로 다시 정리한 요양병원 홈페이지입니다. 층별 시설 안내와 하루 일과로, 가 보기 전에도 지내실 곳을 그려 볼 수 있습니다.
Next project
지금 홈페이지의 고민을 들려주세요. 이 페이지에 담긴 과정 그대로, 처음부터 함께 고민하겠습니다.
Case Study 01 · 새봄아카데미
7세·초등 아이를 둔 학부모는 여러 학원을 동시에 비교합니다. 첫 화면에서 ‘우리 아이 이야기’라는 느낌이 들고, 가장 궁금한 과정·수강료·상담이 숨지 않도록 다섯 페이지를 설계했습니다.
01 · Challenge
상담 전화를 걸기 전, 학부모는 홈페이지에서 이미 많은 것을 판단합니다. 기획은 그 판단의 순간에서 출발했습니다.
학원 홈페이지는 다 비슷해 보여요.
비슷한 문구와 사진 사이에서 ‘우리 아이 또래, 우리 아이 속도’라는 약속이 첫 화면에서 바로 느껴져야 했습니다.
우리 아이는 어느 반에 가야 하죠?
여섯 개 과정을 나열만 하면 고르기 어렵습니다. 학년과 레벨에 따라 학부모가 스스로 위치를 찾을 수 있어야 했습니다.
수강료는 전화해야 알 수 있나요?
가장 궁금한 정보가 숨어 있으면 상담 전에 떠납니다. 금액과 기준을 먼저 보여 주는 쪽이 신뢰를 만든다고 판단했습니다.
02 · Approach
실제로 만든 화면과 함께, 각 화면이 어떤 질문에 답하려 했는지 정리했습니다.
대상(7세·초등)과 약속(아이의 속도)을 첫 문장에 담고, 핵심 단어에는 손글씨 동그라미를 그려 시선이 먼저 닿게 했습니다. 상담 신청과 원장 인사말은 첫 화면에서 바로 누를 수 있습니다.
메인에서는 학년별 과정 카드로 전체를 보여 주고, 과정 페이지에서는 레벨 타임라인과 과정별 상세로 이어집니다. 우리 아이가 어디쯤인지 학부모가 스스로 찾을 수 있습니다.
횟수별 요금 카드로 차이를 바로 보여 주고, 수강료 페이지에는 우리 아이 구성으로 미리 계산해 보는 계산기와 신고 금액·환불 기준을 함께 두었습니다.
후기는 과정별로 골라 볼 수 있게 했고, 모든 페이지는 상담 신청 양식으로 끝납니다. 빠뜨린 항목은 칸 바로 아래에서 알려 줘 처음 쓰는 분도 막히지 않습니다.
03 · Design system
업종의 분위기와 방문자의 마음에 맞춰 색을 고르고, 모든 페이지가 같은 규칙으로 움직이도록 정리했습니다.
#3FA374#23805A#DDF1E6#133024#F6C85F#F6AA1C#F4F7F2#17231DExtraBold 800아이의 속도로 즐겁게 시작해요.
Bold 700아이의 속도로 즐겁게 시작해요.
Regular 400아이의 속도로 즐겁게 시작해요.
둥글고 또렷한 Pretendard 한 가지로 통일했습니다. 제목은 굵고 짧게, 본문은 학부모가 편하게 읽도록 넉넉한 줄 간격을 두었습니다.
아이의 속도로
즐겁게 시작해요
선생님이 교재에 동그라미를 치듯, 가장 중요한 단어에 손으로 그린 마커를 얹었습니다. 배경의 노랑·연두 원은 새봄의 햇살과 새싹을 닮았습니다.
04 · Pages
메인에서 핵심을 요약하고, 더 알고 싶은 내용은 각 페이지에서 깊게 보여 줍니다. 모든 페이지는 상담으로 끝납니다.
학원의 첫인상과 핵심 정보 요약
원장 인사말 · 선생님 · 공간
여섯 과정 상세와 레벨 비교
만족도 조사와 과정별 후기
요금 · 계산기 · 환불 기준
05 · Mobile
학부모는 대부분 휴대폰으로 학원을 찾습니다. 모바일 화면을 따로 설계해, 엄지손가락 하나로 과정과 수강료를 보고 바로 상담을 신청할 수 있게 했습니다.
06 · Full page
스크롤을 내리면 메인 페이지 전체가 PC와 모바일 화면에서 함께 흘러갑니다.
07 · Features
디자인만 예쁜 홈페이지가 되지 않도록, 방문자와 담당자 모두에게 필요한 기능을 직접 개발했습니다.
다음 프로젝트
온결요양병원Your project
이 프로젝트는 한걸음이 가상의 학원을 설정해 기획부터 개발까지 직접 진행한 컨셉 작업입니다. 화면 속 이름·인물·연락처·후기는 실제와 관계없습니다.
Case Study 02 · 온결요양병원
입원을 고민하는 보호자가 가장 불안해하는 건 진료과 이름이 아니라 ‘누가 곁에 있는지, 어디서 지내시는지, 하루를 어떻게 보내시는지’입니다. 그 질문에 사진과 일과로 먼저 답하고, 어느 화면에서든 상담으로 이어지게 했습니다.
01 · Challenge
요양병원을 찾는 사람은 환자 본인보다 자녀인 경우가 많습니다. 걱정이 많은 보호자의 마음에서 출발했습니다.
병원 홈페이지는 차갑고 어려워요.
진료과와 장비 이름만 늘어놓으면 보호자는 무엇이 우리 부모님께 필요한지 알기 어렵습니다. 보호자의 언어로 다시 써야 했습니다.
직접 가 보기 전엔 알 수가 없어요.
병실은 어떤지, 하루를 어떻게 보내시는지 미리 그려 볼 수 있어야 입원 상담까지 마음이 이어집니다.
상담 전화번호를 찾기가 힘들어요.
긴 페이지를 읽다가도 궁금한 순간 바로 전화하거나 상담을 남길 수 있어야 했습니다.
02 · Approach
실제로 만든 화면과 함께, 각 화면이 어떤 질문에 답하려 했는지 정리했습니다.
실제 돌봄 장면을 크게 보여 주는 슬라이더와 ‘부모님의 하루를 가족처럼’이라는 약속으로 시작합니다. 슬라이드는 자동으로 넘어가되 멈춤 버튼을 두어 천천히 읽을 수 있습니다.
재활·치매·투석·통증 관리를 부모님 상태에 맞춘 네 가지 돌봄으로 나눴습니다. 보호자가 받게 될 일정·알림 화면 예시를 함께 보여 주어 입원 뒤의 모습을 떠올릴 수 있습니다.
층을 누르면 그 층의 공간이 바뀌는 층별 안내와, 2·4·6인실을 나란히 비교하는 병실 안내를 만들었습니다. 지하 주차장부터 옥상 정원까지 미리 둘러볼 수 있습니다.
06:30 활력징후 측정부터 21:00 야간 순회까지, 의료진이 어르신을 살피는 하루를 시계와 시간표로 보여 줍니다. ‘밤에는 누가 곁에 있나요?’라는 질문에 대한 답입니다.
PC에서는 옆에 붙어 따라오는 퀵메뉴로, 모바일에서는 화면 아래 상담 바로 언제든 전화와 상담 신청을 할 수 있습니다. 페이지 끝에는 입원 상담 양식을 두었습니다.
03 · Design system
업종의 분위기와 방문자의 마음에 맞춰 색을 고르고, 모든 페이지가 같은 규칙으로 움직이도록 정리했습니다.
#4C9A84#2E7564#DFEFE8#14302A#F2B279#EE9A4D#F4F7F3#17221FExtraBold 800부모님의 하루를 가족처럼 돌봅니다.
Bold 700부모님의 하루를 가족처럼 돌봅니다.
Regular 400부모님의 하루를 가족처럼 돌봅니다.
가변 폰트인 Pretendard Variable로 제목은 단단하게, 본문은 어르신과 보호자가 읽기 편한 크기와 줄 간격으로 맞췄습니다.
부모님의 하루를
가족처럼 돌봅니다
초록과 살구색 두 잎이 가운데를 감싸는 로고를 만들고, 화면 곳곳에는 같은 색이 은은하게 번지는 배경을 깔아 병원의 차가움을 덜었습니다.
04 · Pages
메인에서 핵심을 요약하고, 더 알고 싶은 내용은 각 페이지에서 깊게 보여 줍니다. 모든 페이지는 상담으로 끝납니다.
돌봄 약속과 핵심 안내
인사말 · 연혁 · 의료진 · 오시는 길
진료과 · 특화 센터 · 하루 일과
층별 안내 · 병실 · 안전
사진 갤러리 · 프로그램 · 면회
05 · Mobile
보호자는 출퇴근길이나 병원 대기실에서 휴대폰으로 병원을 찾아봅니다. 모바일에서는 화면 아래 상담 바를 고정해, 읽다가 궁금한 순간 바로 전화할 수 있게 했습니다.
06 · Full page
스크롤을 내리면 메인 페이지 전체가 PC와 모바일 화면에서 함께 흘러갑니다.
07 · Features
디자인만 예쁜 홈페이지가 되지 않도록, 방문자와 담당자 모두에게 필요한 기능을 직접 개발했습니다.
다음 프로젝트
새봄아카데미Your project
이 프로젝트는 한걸음이 가상의 요양병원을 설정해 기획부터 개발까지 직접 진행한 컨셉 작업입니다. 화면 속 이름·인물·연락처·후기는 실제와 관계없습니다.