직접 만들기
dream studio
무료로 시작
AI 콘텐츠 작업실입니다. 랜딩 페이지, 제품 상세 페이지, 카드뉴스, 숏폼·릴스를 만들고, 스튜디오에서 이미지·영상을 생성합니다.
템플릿 초안·편집·파일 내보내기는 크레딧 없이 쓸 수 있습니다. 자동 배포·도메인·문의 수집 서버는 제공하지 않습니다.
무료 홈페이지 안내→oootool.com
MODAM Agency
SEO · GEO · AEO
Plan · Design · Build
Concept work
14 industries
모든 것을 담고, 모든 것을 만듭니다.
당신의 생각과 비즈니스를 웹에 담습니다. 기획·디자인·개발부터 SEO·GEO·AEO까지, 고객이 찾고 AI가 이해하는 홈페이지를 만듭니다.
Our name
모담이라는 이름
모담은 ‘모든 것을 담다’라는 뜻입니다. 주소 oootool의 ooo는 모든 가능성을 담는 그릇이고, tool은 그 가능성을 현실로 만드는 도구입니다. 그래서 이름과 주소가 같은 이야기를 합니다. 당신의 생각을 담고, 웹에서 일하는 홈페이지로 만듭니다.
- 콘셉트 작업 업종
- 14개
- 검수 환경
- 3개
- 기본 구성
- 3가지
식품 제조 · 부동산 · 치과 · IT · 건설 · 프랜차이즈 · 교육 · 화장품 · 인테리어 · 법률 · 정밀부품 · 숙박 · 세무 · 아파트 분양. 업종의 규칙을 연구하려고 직접 만든 콘셉트 작업과 리뉴얼 시안입니다.
데스크톱 · 모바일 · 모션 감소(prefers-reduced-motion). 모든 페이지를 세 환경에서 직접 렌더링해 확인합니다.
HTML · CSS · JS로 된 정적 사이트가 기본입니다. 빠르고, 대부분의 호스팅에 올릴 수 있고, 다음 담당자가 고치기 쉽습니다. 관리자·CMS 같은 기능은 필요할 때 더합니다.
Services
기획부터 검색까지,
모두 담습니다
기획자, 디자이너, 개발자에게 따로 설명할 필요가 없습니다. 리서치부터 배포, 검색 최적화까지 같은 팀이 같은 문서를 보고 일합니다.
- 01
기업 홈페이지
회사소개·사업·제품·고객지원까지 다중 페이지 구조. 헤더·푸터를 한 곳에서 관리하는 빌드로 운영 부담을 줄입니다.
사이트맵 · 4–20페이지 · 빌드 스크립트
- 02
업종별 랜딩 페이지
상담 신청·예약·가맹 문의처럼 전환 하나를 위한 원페이지. 섹션마다 “이게 전화를 늘리는가”로 검수합니다.
섹션 사양서 · 상담 폼 · 모바일 고정 CTA
- 03
검색 · AI 검색 최적화SEO · GEO · AEO
검색엔진이 읽기 좋은 구조, 그리고 생성형 AI와 답변 영역에 인용되기 좋은 질문형 문장을 함께 설계합니다. 이 페이지에도 같은 방식을 적용했습니다.
구조화 데이터 · FAQ · sitemap · llms.txt
- 04
비주얼 · 모션
AI 이미지·영상 생성과 리터칭, 스크롤 리빌과 업종을 닮은 시그니처 인터랙션. 이미지에는 글자를 넣지 않고 문구는 모두 HTML로 씁니다.
이미지 · 영상 세트 · 모션 감소 대응 · 폴백
- 05
리뉴얼 · 성능
기존 사이트의 구조를 살리면서 이미지 WebP 변환, CSS·JS 최소화, 접근성 보완까지 한 번에 정리합니다.
WebP <picture> · 최소화 빌드 · 접근성 점검
- 06
배포 · 인수인계
정적 호스팅 배포와 함께 디자인 토큰·섹션 사양·구현 시 주의점을 정리한 문서를 넘깁니다. 다음 담당자가 막히지 않게.
design.md · spec.md · README
Two ways
직접 만들거나,
끝까지 맡기거나
생각을 웹에 담는 길은 두 가지입니다. 혼자 빠르게 시작하고 싶다면 dream studio, 배포와 검색까지 맡기고 싶다면 모담 제작입니다.
맡기기
모담 제작
상담 후 견적
기획·디자인·개발부터 SEO·GEO·AEO까지, 한 팀이 끝까지 맡습니다.
dream studio가 제공하지 않는 배포, 도메인 연결, 문의 수집도 이어서 맡습니다.
프로젝트 문의하기Tools (12)
가능성을 현실로
만드는 tool
oootool의 tool은 가능성을 현실로 만드는 도구입니다. 모담이 직접 만들어 운영하는 서비스와 솔루션, 그리고 샘플 프로젝트입니다. 서비스는 웹에서 바로 쓰는 것, 솔루션은 사이트나 기기에 들여 쓰는 것, 샘플 프로젝트는 업종별 시스템(ERP 연동 발주·쇼핑몰)을 미리 보여 주는 데모와 프로토타입입니다.
-
dream studio
상상한 장면을, 완성된 콘텐츠로.
랜딩 페이지제품 상세 페이지카드뉴스숏폼·릴스 자세히 보기 → -
3D Photo Studio
포즈·조명·촬영·AI 생성
자세히 보기 → -
개발자 채용
개발자의 다음 기회를, 더 정확하게.
자세히 보기 → -
KakaoPX
카카오톡 채팅방 공지, 코드 한 번이면 끝
자세히 보기 → -
PromptShare
AI 이미지·비디오 생성 프롬프트의 원문과 한국어 번역
자세히 보기 → -
SEO
소개 문구 준비 중
자세히 보기 → -
봇가드
과도한 봇 요청은 막고, 정상 고객은 빠르게 통과시킵니다.
자세히 보기 → -
pickchat
마음에 드는 캐릭터와 지금 대화해 보세요
자세히 보기 → -
모담 커뮤니티
오늘, 모담에서 이야기해요
자세히 보기 → -
DearPlay
macOS용 동영상 플레이어. AI 자막 생성, 내장 브라우저, 스트림 다운로드를 앱 하나에.
자세히 보기 → -
한빛조명 B2B 발주
가상의 조명·전기자재 도매업체 한빛조명을 예로 든 B2B 발주 샘플
자세히 보기 → -
LUSSO 쇼핑몰
가상 브랜드 LUSSO를 예로 든 명품 편집숍형 쇼핑몰 데모
자세히 보기 →
Concept work (14)
콘셉트 작업
14개 작업은 실제 고객 실적이 아닙니다. 13개는 가상 브랜드로 만든 콘셉트 작업이고, NCTOO는 실제 회사를 대상으로 한 리뉴얼 시안입니다. 구조가 서로 다른 세 작업을 먼저 소개합니다.
Process
여섯 단계로
그릇을 채웁니다
-
01
업종 리서치
같은 업종의 실제 사이트를 모아 ‘가져올 것 / 버릴 것’ 표를 만듭니다. 그 업종의 관습과 법정 표시, 고객이 검색창과 AI에 묻는 질문부터 확인합니다.
-
02
구조 · 카피
섹션마다 역할을 정하고, 질문형 구조와 바로 답하는 문장으로 씁니다. 숫자에는 출처를 달고, 근거 없는 최상급 표현은 쓰지 않습니다.
-
03
디자인 시스템
색·타이포·간격을 토큰으로 정하고 CSS 변수와 1:1로 맞춥니다. 한글은 어절 단위 줄바꿈, 숫자는 고정폭으로.
-
04
비주얼 제작
필요한 사진·영상을 AI로 만들고, 수십 MB 원본을 웹용으로 줄이는 스크립트까지 함께 남깁니다.
-
05
개발 · 모션
정적 HTML·CSS·JS를 기본으로 구현하고, 관리자·CMS 같은 기능은 필요할 때 더합니다. 스크립트가 실패하거나 모션을 줄인 환경에서도 콘텐츠는 항상 보입니다.
-
06
검수 · 배포
데스크톱·모바일·모션 감소 세 환경의 렌더링, 콘솔 오류, 링크, 법정 표시를 점검하고, 구조화 데이터·sitemap·llms.txt를 갖춰 배포합니다.
이미지에는 글자를 넣지 않습니다.
모든 문구는 HTML에 담습니다. 검색되고, AI가 읽고, 고쳐지고, 번역됩니다.
Contact
당신의 회사를
담을 차례입니다
업종과 지금 가장 아쉬운 점만 알려 주셔도 됩니다. 무엇을 담을지 함께 정리하고, 비슷한 업종의 작업을 근거로 첫 제안을 드립니다.