웹사이트 제작
고감도 웹사이트
인터랙션
ChatGPT 하나면 6개 웹사이트, 86개 인터랙션까지?
브랜드 웹사이트부터 포트폴리오까지
한 번에 끝낼 수 있습니다!
본 강의는 10월 12일 런칭한 강의로
얼리버드 할인 혜택을 제공하고 있습니다
얼리버드 1차
26년 10월 18일 ~ 10월 25일까지
정가 450,000원
판매가 209,000원
12개월 할부 적용시
월 17,417원
얼리버드 2차
26년 10월 26일 ~ 11월 11일까지
정가 450,000원
판매가 229,000원
12개월 할부 적용시
월 19,084원
정가
500,000원
최저 가격 마감까지 남은 시간
6일16시간54분38초
ChatGPT로
누구나 이런 웹사이트를 만들 수 있습니다
3D형부터 모션으로 시선을 사로잡는 사이트까지 -
[ ChatGPT ] 하나면 가능합니다
이 강의가 압도적인 이유
생각만 했던 이미지를
나만의 웹사이트로 만들 수 있습니다!
Point 1
웹사이트 감도를 200% 올려줄
인터랙션 86종을 전부 담았습니다!
첫 화면에서 시선을 잡고, 디테일 인랙션으로 사용자 경험을 UP!
-
테크닉 01 · 히어로 인터랙션
시선을 사로잡는 히어로 인터랙션
정적인 히어로 페이지에 인터랙션만 더해도 압도적인 퀄리티의 웹사이트가 됩니다
-
테크닉 02 · 마이크로 인터랙션
디테일 하나로 완성도가 달라지는 마이크로 인터랙션
잘 만든 웹사이트와 평범한 웹사이트, 2% 차이는 디테일에서 갈립니다
01 Hover & Cursor · 마우스를 올리는 순간 반응하는 인터랙션 · 22종
02 Click & Feedback · 누르는 순간 반응하는 인터랙션 · 20종
03 Content & Card · 넘기고 펼치는 순간 반응하는 인터랙션 · 15종
04 Scroll & Navigation · 스크롤할 때 반응하는 인터랙션 · 11종
05 Motion & Page · 들어오는 순간 반응하는 인터랙션 · 14종
히어로 페이지, 디테일, 상품까지
인터랙션 86종을 조합하면 어워드급 웹사이트가 완성됩니다
뻔하고 정형화된 웹사이트 레이아웃은 이제 그만!
86종 인터랙션을 활용해 고퀄리티 3D 인터랙티브 웹사이트를 완성해보세요
Point 2
사람들이 멈춰보고 기억하는 웹사이트는 무엇이 다를까요?
방문자를 락인시키는 구성, 비주얼, 인터랙션 노하우를
웹사이트 6종으로 알려드립니다.
Point 3
ChatGPT 하나로 기획부터 디자인, 인터랙션 제작, 수정, 배포까지,
어렵지 않게 단계별로 차근차근 알려드립니다!
STEP 01
만들고 싶은 웹사이트 목적 정하기
만들고 싶은 웹사이트 레퍼런스를 수집합니다
웹사이트 구성부터 정보 위계까지 단계별로 배웁니다
웹사이트의 감도를 결정하는 요소와 디테일들을 분석합니다
브랜드, 분위기, 히어로 섹션, 원하는 인터랙션을 정합니다
STEP 02
웹사이트 구조, 위계 만들기
필요한 페이지와 정보의 순서를 설계합니다
무엇을 먼저 보여줄지 위계를 정해 시선의 흐름을 만듭니다
목적에 맞는 사용자 동선과 버튼 위치를 설계합니다
컬러, 타이포, 레이아웃 기준 등을 design.md 파일로 정리합니다
STEP 03
ChatGPT로 디자인 초안 제작하기
프롬프트와 design.md를 그대로 넘겨 기준에 맞게 구현합니다
정해둔 컬러, 타이포, 여백을 모든 화면에 똑같이 적용합니다
STEP 04
ChatGPT로 웹에 들어갈 영상, 이미지 만들기
웹사이트 무드에 맞는 이미지, 영상 컨셉을 정합니다
ChatGPT에 Higgsfield를 연결해 에셋(영상, 이미지)를 제작합니다
STEP 05
시선을 사로잡는 히어로 인터랙션 제작하기
강조할 정보에 맞는 인터랙션을 제작합니다
3D, 타이포, 스크롤 모션으로 방문자의 시선을 붙잡습니다
이미지와 영상 소스를 화면 흐름과 톤앤매너에 맞게 배치합니다
브랜드의 메시지가 한눈에 보이는 히어로를 설계합니다
STEP 06
디테일이 살아있는 마이크로 인터랙션 제작하기
스크롤, 클릭, 터치마다 자연스러우면서 입체적인 모션을 제작합니다
버튼, 이미지, 로고에 역할에 맞는 움직임을 적용합니다
커서, 카드, 네비게이션 등의 여러 인터랙션들을 연결합니다
속도와 강도를 조절해 디테일한 완성도를 높입니다
STEP 07
디테일을 수정하고 웹/모바일 최적화하기
인터랙션의 속도와 타이밍을 조절합니다
레이아웃, 여백, 폰트, 이미지 비율을 정리합니다
마우스가 없는 모바일에 맞게 인터랙션을 조정합니다
깨지는 화면과 기능 오류를 수정합니다
STEP 08
배포하기
버튼, 링크, 메뉴의 작동을 점검합니다
검색과 공유에 필요한 제목, 설명, 이미지를 설정합니다
내 도메인을 연결해, 나만의 주소로 공개합니다
완성된 사이트를 URL로 배포합니다
핀터레스트st, 디자인 어워드를 수상한 웹사이트
이제 직접 만드세요
시선을 사로잡는 웹사이트를 만드는 한 끗 차이!
스튜디오 너티가 알려드립니다
Instagram 6만 팔로워 · 모델 신현지 YouTube 채널 디자인 · 그 외 다수 브랜딩 작업 진행
BONUS
무한 수정은 이제 그만, 정답만 빠르게 복붙하세요
기획, 디자인, 에셋 제작, 레퍼런스 탐색 시간을 줄여주는
웹사이트 제작 패키지 28종을 드립니다
단계별 프롬프트
템플릿 5종
템플릿 5종
기획, 디자인, 인터랙션 단계별 프롬프트로 빠른 시작을 도와드려요
고감도 디자인을 바로 적용하는
design.md 파일 7종
design.md 파일 7종
한 번 만든 디자인 시스템으로, 다음 웹사이트는 더 빠르게 제작해보세요
6종 웹사이트에서 원하는 디자인만 쏙쏙
이미지, 영상 에셋 7세트
이미지, 영상 에셋 7세트
디자이너가 직접 제작한 에셋을 웹사이트에 바로 적용해보세요
작업 단계별 디자인 퀄리티를 높여줄
레퍼런스 사이트 9종
레퍼런스 사이트 9종
더 감도 높은 웹사이트 제작을 위한 미감을 바로 충전하세요
※ 모든 자료는 [2026.12.11] 최종 강의 영상 공개 시 일괄 제공됩니다.
FAQ
Question 1
코딩을 전혀 몰라도 되나요?
코딩을 전혀 몰라도 되나요?
네. 모든 과정을 ChatGPT에 프롬프트로 요청하며 진행합니다.
코드를 직접 작성하지 않아도 웹사이트를 완성할 수 있습니다.
Question 2
AI 툴을 처음 써봐도 따라갈 수 있나요?
AI 툴을 처음 써봐도 따라갈 수 있나요?
입문자도 따라올 수 있도록 단계별 프롬프트 템플릿과 design.md 파일, 웹사이트에 추가할 디자인 에셋 파일을 함께 드립니다.
Question 3
다른 AI 웹사이트 강의와 무엇이 다른가요?
다른 AI 웹사이트 강의와 무엇이 다른가요?
기능 구현에 더불어 ‘감도’에 집중합니다.
인터랙션 86종과 다음 프로젝트에도 재사용할 수 있는 design.md로,
강의가 끝난 뒤에도 원하는 웹사이트를 계속 만들 수 있습니다.
인터랙션 86종과 다음 프로젝트에도 재사용할 수 있는 design.md로,
강의가 끝난 뒤에도 원하는 웹사이트를 계속 만들 수 있습니다.
Question 4
어떤 툴이 필요한가요?
어떤 툴이 필요한가요?
ChatGPT 유료 플랜(Pro 구독)이 필요합니다(Claude 사용도 가능).
영상 에셋까지 직접 만들고 싶다면 Higgsfield 등 유료 툴이 선택으로 필요합니다.
본 강의에서
사용될 프로그램 안내드립니다.
사용될 프로그램 안내드립니다.
· ChatGPT (유료 Pro 구독)
· Higgsfield
ChatGPT 유로 모델(Pro 구독)로 업그레이드 권장합니다. (Claude 사용 무관)
영상 에셋까지 직접 제작하여 활용하고 싶은 경우에는 Higgsfield, Newtake 유로 툴 구독
· Higgsfield
ChatGPT 유로 모델(Pro 구독)로 업그레이드 권장합니다. (Claude 사용 무관)
영상 에셋까지 직접 제작하여 활용하고 싶은 경우에는 Higgsfield, Newtake 유로 툴 구독
* 프로그램은 제공되지 않습니다.
* 툴이나 프로그램 사용 환경과 버전 업데이트에 따라, 강의 내 화면(UI) 구성이나 기능이 실제 수강 시점과 다를 수 있습니다.
* 본 강의는 촬영 시점의 버전을 기준으로 학습 흐름과 개념 전달에 중점을 두었으며, 이후 버전 업데이트에 따른 내용 수정이나 추가는 제공되지 않습니다.
* 강의에서 안내되는 AI 툴의 무료 크레딧 제공 여부 및 요금제 가격은 각 서비스 제공사의 정책에 따라 변경되거나 종료될 수 있습니다.
이용 전 반드시 해당 서비스의 최신 정책 및 요금을 확인해 주시기 바랍니다.
* 실습에서 활용되는 도구 사용법은 강의에서 모두 알려드릴 예정이니 선수지식없이도 수강하실 수 있습니다.
스튜디오 너티
· 현) 6만 인스타그램 채널 운영
· 현) 스튜디오 너티 운영
이력
· 2026 Adobe MAX MIAMI 인사이더 활동
· 2025 Adobe MAX LA 인사이더 활동
· 2024 모델 신현지 유튜브 채널 디자인
· 2023 KBS 비즈니스영상원 브랜딩 총괄
· 2022 LH청년주택 에스키스 브랜딩 총괄
· 2021 LH청년주택 안암생활 F&B 브랜딩
· 어도비, 와콤, 젠스파크 등 다수 콘텐츠 제작
디자인 맛집 ‘스튜디오 너티’의 미감과 ChatGPT 하나로
이런 감도 높은 웹사이트를 만들어보세요!
