웹사이트 기획 · 디자인 · 개발
01 / 공개 작업
브랜드 웹사이트와 개인 프로덕트 5개를 만든 순서대로 모았습니다. 업종별 사이트는 가상 브랜드를 위한 콘셉트 작업이며, 개인 프로덕트는 구현 범위를 따로 표시했습니다.
의료 · 브랜드 웹사이트
2026
콘셉트 사이트
진료 전 필요한 정보를 차분히 확인하고, 모바일에서 바로 행동할 수 있도록 정리한 병원 홈페이지입니다.
핵심 판단진료 안내를 읽은 뒤 전화와 위치 확인으로 이어지도록, 방문 전 필요한 정보를 먼저 배치했습니다.
의료기관 · 정보 중심 UX · 모바일 CTA
onyou-clinic.vercel.app진료시간, 진료 항목, 건강검진 절차처럼 방문 전에 확인할 내용이 많아 정보의 우선순위가 중요했습니다.
필수 정보를 짧은 동선 안에 배치하고, 청록색과 넓은 여백을 사용해 의료 정보가 과장 없이 읽히도록 설계했습니다.
생활 서비스 · 상담 웹사이트
2026
콘셉트 사이트
서비스 범위와 견적 기준을 먼저 확인한 뒤 자연스럽게 상담할 수 있도록 만든 생활 서비스 사이트입니다.
핵심 판단상담 버튼을 누르기 전에 청소 범위와 견적 기준부터 확인할 수 있도록 정보의 순서를 잡았습니다.
생활 서비스 · 견적 중심 UX · 신뢰 정보
cleanhouse-on.vercel.app청소 범위와 견적 방식이 보이지 않으면 문의 전 불확실성이 커지기 때문에 설명의 순서와 구체성이 필요했습니다.
서비스 범위, 진행 방식, 견적 안내를 먼저 제시하고 맑은 블루 톤으로 정돈된 인상을 만들었습니다.
개인 프로덕트 · AI 에이전트
2026
개인 프로덕트 · 프로토타입
대상과 상황, 예산을 한 문장으로 말하면 네이버 쇼핑의 실제 판매 상품을 카테고리별로 비교해 추천하는 대화형 커머스 에이전트입니다.
핵심 판단자유로운 추천 요청을 상품 검색과 비교 화면으로 연결해, 대화가 다음 선택으로 이어지도록 만들었습니다.
핵심 사용 흐름
대상·상황·예산을 자연어로 입력
네이버 쇼핑 데이터를 바탕으로 후보 탐색
카테고리별 추천과 상품 링크 확인
대화형 UI · 실시간 쇼핑 데이터 · AI 추천
pickpick-five.vercel.app상품 추천이 그럴듯한 문장으로만 끝나지 않고, 실제로 지금 살 수 있는 가격과 재고를 가진 진짜 상품을 보여줘야 신뢰할 수 있었습니다.
자유 문장 입력을 받아 대상·상황·예산을 해석하고, 네이버 쇼핑 실거래 데이터를 조회해 카테고리별로 비교 가능한 형태로 정리해 보여주도록 설계했습니다.
피트니스 · 전환 웹사이트
2026
콘셉트 사이트
강한 브랜드 인상에서 프로그램 탐색과 체험 상담까지 하나의 흐름으로 이어지는 피트니스 사이트입니다.
핵심 판단강한 첫인상 뒤에 프로그램·시설·상담을 순서대로 배치해, 브랜드 탐색과 문의가 끊기지 않게 했습니다.
피트니스 · 에디토리얼 UI · 상담 동선
groundfit-24.vercel.app시설과 프로그램을 충분히 보여주면서도 피트니스 브랜드의 에너지를 첫 화면에서 분명하게 전달해야 했습니다.
굵은 타이포그래피와 라임 컬러를 중심으로 시선을 잡고, 프로그램·시설·상담 순서로 탐색 흐름을 단순화했습니다.
개인 프로덕트 · 사주 웹 서비스
2026
개인 프로덕트 · Mock 결제 데모
생년월일을 입력해 무료 사주 미리보기를 확인하고, 테스트 결제 후 전체 리포트를 여는 모바일 우선 서비스입니다. 공개 데모는 Mock 결제로 실제 청구되지 않습니다.
핵심 판단무료 미리보기와 전체 리포트의 접근 권한을 나누고, AI 해석이 실패하면 기본 풀이로 이어지도록 설계했습니다.
핵심 사용 흐름
입력 정보를 계산해 기본 결과 제공
실제 청구 없는 테스트 결제 흐름
접근 권한 확인 후 AI 또는 기본 풀이 제공
Mock 결제 · 접근 권한 분리 · AI + 기본 풀이
cheonmyeong-three.vercel.app회원가입 없이도 결제 전/후 접근 권한을 안전하게 나누고, 개인정보(생년월일·이름)를 요청 시 완전히 삭제할 수 있어야 했습니다. AI 응답이 실패하거나 비용이 부담스러운 상황에도 리포트는 항상 제공돼야 했습니다.
한국천문연구원 자료 기반 결정론적 계산으로 무료 미리보기를 먼저 보여주고, 서버 검증형 결제 이후에만 상세 리포트에 접근하도록 토큰을 분리했습니다. AI 해석이 실패해도 안전한 기본 풀이가 항상 대체되도록 설계했습니다.
02 / 제작 기준
무엇을 먼저 읽어야 하는지, 다음 행동은 무엇인지. 내용과 사용 흐름을 정리한 다음 디자인과 코드로 옮깁니다.
업종마다 다른 제작 기준도 따로 정리했습니다.
03 / 과정
사업, 고객, 경쟁 환경과 지금 홈페이지가 맡아야 할 역할을 함께 정리합니다.
콘텐츠 우선순위와 방문자가 문의까지 가는 흐름을 설계합니다.
브랜드의 인상을 화면에 옮기고 반응형 코드로 구현합니다.
기기별 화면과 링크, 검색 설정을 확인한 뒤 웹에 배포합니다.
04 / 프로젝트 문의
브랜드 홈페이지, 기존 사이트 개편, 새로운 웹 서비스. 필요한 작업과 현재 상황을 이메일로 편하게 보내주세요.
이메일로 바로 문의
sejin573@naver.com아래 항목을 고르면 복사할 수 있는 초안이 만들어집니다. 입력 내용은 저장되거나 자동으로 전송되지 않습니다.
입력한 내용은 이 브라우저에서만 사용되며 저장되지 않습니다.
sejin573@naver.com