기틀은 껍데기만 예쁜 홈페이지를 만들지 않습니다.

눈에 보이는 화면 이면의, 보이지 않는 ‘자동화 파이프라인’을 함께 구축합니다.

이 포트폴리오에 대해

  • 제작일곱 곳 모두 기획부터 화면까지 직접 만들었습니다
  • 자동화그중 두 곳은 자동화 파이프라인까지 구축해 검증했습니다
  • 공개주소를 그대로 열어 두었습니다. 눌러서 확인하실 수 있습니다
  • 참고운영 중인 고객사 사이트가 아닙니다

지어낸 고객도, 지어낸 회사명도 없습니다.

직접 만든 화면 일곱 개입니다.

작업마다 방문자가 보는 화면과, 제출 즉시 담당자에게 데이터가 전달되는 과정을 나란히 배치했습니다.

dermatology-clinic-theta.vercel.app
VERT 피부과 클리닉 첫 화면

병원 · 의원

VERT 피부과 클리닉

진료 항목이 여섯 가지로 나뉘고, 의료진 세 명이 각자 다른 분야를 맡습니다. 방문자가 자기 증상을 먼저 고르고 그 자리에서 예약으로 넘어가게 짰습니다.

  • 병원 소개 · 진료 안내 · 의료진 · 오시는 길
  • 진료 항목 6종 (레이저 · 색소 · 안티에이징 · 여드름 · 모공 · 바디)
  • 예약 · 상담 폼
  • 카카오 상담 · 네이버 예약 연결
운영 중인 사이트 확인

제출한 그 시각에담당자 쪽에서는 이렇게 보입니다

담당자 휴대폰

새 예약 신청방금

  • 진료도수치료
  • 희망3월 14일 14:00
  • 담당데스크 실장

업무 시트

VERT 피부과 클리닉 폼으로 접수된 내용이 업무 시트에 쌓이는 예시
접수시각이름연락처진료 항목희망 일시담당
14:02김○○010-****-1234도수치료3/14 14:00데스크

재입력하는 사람 없이 행 하나가 생깁니다. 값은 예시이며 실제 접수 건이 아닙니다.

이면에 구축된 자동화 파이프라인8단계

상담 접수 · 예약 일정 관리

접수 → 중복 확인 → 기록 → 알림 → 예약 생성 → 예약 변경 → 예약 취소 → 안내

  • Google Sheets
  • Google Calendar
  • Gmail
  • 카카오 알림
jungyul-homepage.vercel.app
법무법인 정율 업무 분야를 고르는 화면

전문직

법무법인 정율

업무 분야가 여섯 갈래라 무엇을 맡길 수 있는지부터 갈라 놓았습니다. 상담 절차와 필요 서류를 미리 적어 두어, 연락하기 전에 준비할 것을 알 수 있게 했습니다.

  • 업무 분야 6종 (부동산·법인 등기 · 상속 · 회생 · 민사 · 가족관계)
  • 상담 절차 · 필요 서류 안내 · 자주 묻는 질문
  • 법인 소개 · 구성원 소개
  • 상담 신청 폼
운영 중인 사이트 확인

제출한 그 시각에담당자 쪽에서는 이렇게 보입니다

담당자 휴대폰

새 상담 신청방금

  • 분야민사 · 손해배상
  • 희망3월 15일 오전
  • 담당민사팀

업무 시트

법무법인 정율 폼으로 접수된 내용이 업무 시트에 쌓이는 예시
접수시각이름연락처업무 분야희망 상담담당
09:41이○○010-****-5678민사 · 손해배상3/15 오전민사팀

재입력하는 사람 없이 행 하나가 생깁니다. 값은 예시이며 실제 접수 건이 아닙니다.

이면에 구축된 자동화 파이프라인6단계

상담 접수 · 필요 서류 안내 메일

접수 → 중복 확인 → 기록 → 서류 판별 → 메일 생성 → 발송

  • Google Sheets
  • Gmail
spogym-jongno.vercel.app
스포짐 종로점 첫 화면

매장 · 스튜디오

스포짐 종로점

PT 세 등급과 GX 프로그램을 한 화면에서 비교하게 두었습니다. 헬스장은 시설을 눈으로 확인하고 오는 곳이라 시설 안내에 자리를 크게 줬습니다.

  • 센터 소개 · 프로그램 · 트레이너 · 시설 안내
  • PT 3등급 (START · LEVEL 2 · PREMIUM)
  • GX 프로그램 (요가 · 필라테스 · 줌바 등)
  • 방문상담 · 체험신청 폼
운영 중인 사이트 확인

제출한 그 시각에담당자 쪽에서는 이렇게 보입니다

담당자 휴대폰

무료 체험 신청방금

  • 종목PT 체험
  • 희망3월 12일 19:00
  • 담당종로점 매니저

업무 시트

스포짐 종로점 폼으로 접수된 내용이 업무 시트에 쌓이는 예시
접수시각이름연락처희망 종목방문 희망담당
19:07박○○010-****-9012PT 체험3/12 19:00종로점

재입력하는 사람 없이 행 하나가 생깁니다. 값은 예시이며 실제 접수 건이 아닙니다.

자동화 파이프라인 미연동 구간

연동 시 구현되는 파이프라인

체험 신청 → 트레이너 배정 → 방문 전날 안내

곳에서 이미 구축을 마친 구성을 그대로 적용합니다. 위 도해는 그 구현 결과입니다.

rehabhampage.vercel.app
OO재활의학과 첫 화면

병원 · 의원

OO재활의학과

불편한 부위를 먼저 고르면 관련 증상과 진료 영역으로 이어집니다. 병명을 모르고 오시는 분이 많은 진료과라, 부위에서 시작해 다음 단계로 넘어가게 짰습니다.

  • 클리닉 8곳 (목 · 허리 · 어깨 · 팔꿈치 · 손목 · 고관절 · 무릎 · 발목)
  • 비수술적 치료 5종 · 재활치료
  • 의료진별 주간 진료 일정 · 진료안내 · 오시는 길
  • 상담 · 예약 신청 폼 (클리닉 · 방문 유형 · 희망 일시)
운영 중인 사이트 확인

제출한 그 시각에담당자 쪽에서는 이렇게 보입니다

담당자 휴대폰

새 예약 신청방금

  • 클리닉무릎 클리닉
  • 방문처음 방문
  • 희망3월 18일 10:30

업무 시트

OO재활의학과 폼으로 접수된 내용이 업무 시트에 쌓이는 예시
접수시각이름연락처클리닉방문 유형희망 일시
10:15최○○010-****-3456무릎처음 방문3/18 10:30

재입력하는 사람 없이 행 하나가 생깁니다. 값은 예시이며 실제 접수 건이 아닙니다.

자동화 파이프라인 미연동 구간

연동 시 구현되는 파이프라인

예약 신청 → 클리닉별 분류 → 일정 등록 → 방문 전날 안내

곳에서 이미 구축을 마친 구성을 그대로 적용합니다. 위 도해는 그 구현 결과입니다.

damgyeol-tax-partners.vercel.app
세무법인 담결 첫 화면

전문직

세무법인 담결

업무 분야는 넷으로 나뉘지만, 찾아오는 분은 세목 이름을 모르고 옵니다. 그래서 상담 폼을 세목이 아니라 지금 어떤 일이 있었는지 상황으로 고르게 짰습니다.

  • 세무서비스 4종 (사업자 세무관리 · 양도·상속·증여 · 세무조사·조세불복 · 법인 설립·전환)
  • 업무 원칙 · 상담 후기 · 분야별 담당 세무사 · 오시는 길
  • 세무가이드 (분야별 세무 기준 · 자주 묻는 질문)
  • 상황으로 고르는 상담 신청 폼 (상담 분야 · 현재 상황)
운영 중인 사이트 확인

제출한 그 시각에담당자 쪽에서는 이렇게 보입니다

담당자 휴대폰

새 상담 신청방금

  • 분야양도·상속·증여
  • 상황지난달 부동산 양도
  • 담당양도·상속 담당

업무 시트

세무법인 담결 폼으로 접수된 내용이 업무 시트에 쌓이는 예시
접수시각성함·업체명연락처상담 분야현재 상황담당
15:26정○○010-****-7720양도·상속·증여부동산 양도양도·상속

재입력하는 사람 없이 행 하나가 생깁니다. 값은 예시이며 실제 접수 건이 아닙니다.

자동화 파이프라인 미연동 구간

연동 시 구현되는 파이프라인

상담 신청 → 분야별 담당 배정 → 필요 자료 안내

곳에서 이미 구축을 마친 구성을 그대로 적용합니다. 위 도해는 그 구현 결과입니다.

arcen-asset-management.vercel.app
ARCEN Asset Management 첫 화면

금융 · 자산운용

ARCEN Asset Management

투자자 유형에 따라 먼저 검토하는 전략과 필요한 서류가 달라집니다. 그래서 상담 신청을 다섯 단계로 나눠, 유형을 고르는 것에서 시작하게 짰습니다.

  • 전략 4종 (주식 · 대체투자 · 멀티에셋 · 기관 맞춤)
  • 운용 조직과 권한 · 하나의 결정이 지나가는 여섯 단계
  • 서한과 리서치 기록 (시장 · 리서치 · 자산 리뷰)
  • 다섯 단계로 나눈 상담 신청 (유형 · 전략 · 규모 · 연락 · 동의)
운영 중인 사이트 확인

제출한 그 시각에담당자 쪽에서는 이렇게 보입니다

담당자 휴대폰

새 상담 신청방금

  • 유형법인
  • 관심 전략멀티에셋
  • 담당배정 운용역

업무 시트

ARCEN Asset Management 폼으로 접수된 내용이 업무 시트에 쌓이는 예시
접수시각성함연락처투자자 유형관심 전략운용 규모
11:20한○○010-****-2043법인멀티에셋미정

재입력하는 사람 없이 행 하나가 생깁니다. 값은 예시이며 실제 접수 건이 아닙니다.

자동화 파이프라인 미연동 구간

연동 시 구현되는 파이프라인

상담 신청 → 유형별 담당 배정 → 사전 확인 회신

곳에서 이미 구축을 마친 구성을 그대로 적용합니다. 위 도해는 그 구현 결과입니다.

edita-skin.vercel.app
ÉDITA SKIN 첫 화면

뷰티 · 브랜드

ÉDITA SKIN

제품을 늘려 설명하는 대신 세 단계로 줄여 보여 주는 브랜드 화면입니다. 읽는 사람에게 무엇을 고르면 되는지가 먼저 남도록 한 페이지로 짰습니다.

  • 한 페이지 구성 (스크롤로 이어지는 브랜드 서사)
  • 루틴 3단계 (클렌즈 · 트리트 · 실)
  • 제품 3종 소개
  • 로고 · 파비콘 등 브랜드 자산
운영 중인 사이트 확인

문의 폼 없는 작업브랜드를 보여 주는 화면만 만들었습니다. 받을 문의가 생기면 폼부터 설계해 아래 구성을 붙입니다.

자동화 파이프라인 미연동 구간

연동 시 구현되는 파이프라인

사전 예약 신청 → 담당자 알림 → 안내 발송

곳에서 이미 구축을 마친 구성을 그대로 적용합니다.

추상적인 ‘자동화’를 넘어, 실제 작동하는 파이프라인을 공개합니다.

아래 둘은 기틀스튜디오가 직접 구축하여 실무에 적용 중인 자체 시스템입니다. 이 사이트의 상담도 여기로 들어옵니다.

여러 창구를 한 곳에서 받는 AI 상담

파이프라인 실행 조건

  • 홈페이지
  • 네이버 톡톡
  • 페이스북
  • 인스타그램
  • 스레드
  1. 01받기다섯 창구에서 들어온 문의를 같은 형식으로 맞춥니다
  2. 02이어 붙이기같은 사람이 이전에 물어본 내용을 찾아 대화를 잇습니다
  3. 03답 만들기쌓아 둔 자료에서 근거를 찾아 답을 만듭니다
  4. 04판단AI가 답할 수 있는 질문인지, 사람이 봐야 하는지 가릅니다
  5. 05보내기문의가 들어온 그 창구로 답이 나갑니다
  6. 06남기기관리자에게 알림이 가고, 상담 기록이 시트에 쌓입니다

연동 시스템

  • Supabase
  • OpenAI
  • 네이버 톡톡
  • Meta
  • Threads
  • Gmail
  • Google Sheets

자료를 읽고 답하는 상담 챗봇

파이프라인 실행 조건

  • 방문자가 챗봇에 질문할 때
  • 구글 드라이브에 자료를 올리거나 고칠 때
  1. 01질문 받기이전 대화가 있으면 이어서 답합니다
  2. 02자료 찾기올려 둔 자료에서 질문과 맞는 대목을 찾습니다
  3. 03답하기찾은 대목을 근거로 답을 만들어 보냅니다
  4. 04기록주고받은 내용이 시트에 남습니다
  5. 05자료 갱신드라이브에 새 파일을 올리면 자동으로 읽어 들입니다
  6. 06다시 색인고친 파일은 예전 내용을 지우고 새로 넣습니다

연동 시스템

  • OpenAI
  • Supabase
  • Google Drive
  • Google Sheets

자체 검증을 마치지 않은 시스템은 납품하지 않습니다. 위 파이프라인은 전부 실무에서 운영하며 검증했습니다.

업종별 자동화 적용 범위를 확인하십시오.

위에 없는 업종도 어느 업무까지 연동 가능한지 문서로 정리해 두었습니다.

유사한 업무 구조가 있다면, 그 지점부터 진단합니다.

현재 운영 방식만 알려 주시면 어느 구간까지 연동 가능한지 진단해 드립니다.