💻 JSFiddle로 HTML 콘텐츠 만들기 - 비개발자의 첫도전!

프로그래밍을 몰라도 OK! 기획자 엘리사가 ChatGPT와 함께 JSFiddle로 만든 한글 학습 HTML 콘텐츠 제작 후기

---

 

 

코딩 몰라도 OK! 기획자 엘리사의 첫 HTML 제작 후기.

애니메이션도 만들어보고, 캐릭터로 숏츠 영상도 만들어봤던 저...
이번엔 전혀 다른 영역에 도전했어요!
바로 HTML을 활용한 한글 단어 학습 콘텐츠 제작입니다! 🤓

프로그래밍 지식은 전혀 없지만,
ChatGPT와 함께라면 가능하지 않을까? 하는 마음으로 시작했어요.
생애 첫 HTML 실습기 남겨봅니다. 

 

 

 

🌐 JSFiddle란?

JSFiddle은 웹 브라우저에서 바로 코드를 작성하고 결과를 실시간으로 볼 수 있는 사이트예요.
HTML, CSS, JavaScript를 따로 설치하지 않고도 테스트할 수 있어서
프로그래밍 초보자에게 딱!

처음 검은 화면을 마주했을 땐 솔직히 무서웠어요 😅
그런데 하나씩 ChatGPT에게 묻고 따라 하다 보니,
생각보다 재미있게 완성할 수 있었답니다!

👉 JSFiddle 바로가기

홈페이지 화면

 

 

🎨 Step 1. 한글 단어 학습용 이미지 준비

제가 만든 콘텐츠는 ‘가’로 시작하는 단어들을 배우는 학습용 콘텐츠였어요.
우선 준비한 구성은 아래와 같아요:

• ‘가방’, ‘가오리’ 같은 단어 이미지
• 다시 듣기 버튼
• 다음 단어로 넘어가는 버튼

이미지들은 ChatGPT가 도와준 프롬프트로 생성형 AI 툴을 활용해서 만들었고,
업로드는 PostImages 를 사용해 이미지 경로를 확보했어요.

요청한 구도

 

 

💻 Step 2. ChatGPT와 함께 HTML 만들기

처음에는 PPT처럼 구성한 자료를 보여주면서
“이런 장면을 웹에서 구현하고 싶어요” 라고 말했어요.

그러자 ChatGPT가 바로 HTML과 CSS 코드를 뚝딱 만들어줬고,
중간중간 제가 원하는 방식으로 질문하고 수정하면서 완성했어요!

 

📌 적용된 기능 리스트

• OpenAI TTS로 음성 자동 재생
• 각 단어마다 음성 2회 반복
• 텍스트에 애니메이션 효과
• 다시 듣기 버튼으로 재생 가능
• 음성 끝나면 다음 버튼 강조
• 다음 버튼 클릭 시 새 단어로 전환

 

 

⚙️ 시행착오의 늪

HTML은 처음이니까 당연히 어려움도 있었죠.
하지만 그때마다 ChatGPT와 함께 해결해나갔습니다!

❌ 문제 1 - 이미지가 안 떠요!

원인: 이미지 경로 오류

👉 해결: PostImages에서 직접 링크 복사로 해결!

 

❌ 문제 2 - 텍스트 위치가 이상해요!

원인: CSS 구조 문제

👉 해결: 이미지와 텍스트를 같은 박스에 넣고 padding, margin으로 조정

 

❌ 문제 3 - 단어가 다 한꺼번에 보여요!

원인: 초기 구조 설계 미흡

👉 해결: JavaScript로 하나씩 전환되도록 기능 추가

 

❌ 문제 4 - 글자 색이 갑자기 흰색?!

원인: CSS 기본값 오류

👉 해결: 검정색으로 변경 + 가독성 높이기 위해 글자 크기 조정

 

 

✨ 완성 장면 (JSFiddle)

HTML 코드 창에 이런 식으로 제가 만든 콘텐츠가 띄워져 있어요.
사실 직접 입력하진 않았지만... 괜히 개발자 된 기분! 🤣

 

 

🙌 느낀 점 & 다음 목표

처음엔 “이거 될까?” 싶었지만,
AI와 함께 하나하나 쌓아가면서 정말 HTML 콘텐츠 하나를 완성할 수 있었어요.

기획자로서 항상 상상만 하고 넘겼던 일들을
이제는 조금씩 직접 구현해 볼 수 있다는 자신감이 생겼습니다.

 

🎯 다음엔 이렇게 해볼 거예요!

• 배경 이미지와 단어 이미지를 레이어로 나눠서 애니메이션 효과 추가
• 버튼 이미지도 직접 만들고, 효과음 삽입
• 영상이나 오디오를 HTML로 직접 넣기
• 게임처럼 상호작용 가능한 인터랙티브 콘텐츠로 발전시키기!

 

 

📝 판타스틱한 경험

프로그래밍을 1도 몰랐던 제가
단어 학습용 웹 콘텐츠를 스스로 만들었다니, 정말 감격이에요!

AI 덕분에 “코딩은 전문가만 하는 일”이라는 벽을 조금 허물 수 있었고,
이 경험이 제 콘텐츠 기획에도 큰 자산이 될 것 같아요. 😊

이게 요즘 핫한 바이브 코딩인거겠죠? 

하루를 홀랑 쏟은 HTML 도전기 정말 흥미로웠던 기록으로 남겨봅니다.