🧸 조각조각 배우는 웹사이트 만들기

개념을 배우고 딱 하나씩 실습해보는 다정한 시간 ✨

STAGE 1-1

👋 반가워요! 천천히 시작해요 🌸

컴퓨터가 조금 낯설어도 걱정하지 마세요. 남편인 성유 님이 파일 여는 것을 도와줄 거예요. 우리는 조급해하지 않고, 아주 작은 조각부터 하나씩 맞춰갈 거랍니다.

💡 오늘의 마음가짐: "나는 오늘 아주 멋진 비밀 기술을 하나씩 모으고 있어!" 하고 가볍게 미소 지어봐요. 😊
STAGE 1-2

📖 어휘 공부: '랜딩 페이지'란?

인터넷 세상에서 복잡하고 큰 쇼룸(웹사이트)이 아니라, 손님이 구경하다가 마음에 쏙 들어서 무조건 **'전화하기'** 버튼을 누르게 만드는 **예쁜 한 장짜리 전단지**예요!

🧠 기억하기: 우리는 사장님들이 가장 좋아하는 '알짜배기 전단지(랜딩 페이지)' 만드는 법을 배울 거예요.
STAGE 1-3

🎯 실습 미션 1: 마음에 드는 디자인 찾기

개념을 배웠으니 첫 번째 미션을 해볼까요? 스마트폰에서 핀터레스트 앱을 켜고 아래 영단어를 검색해 보세요!

Mobile landing page template
미션: 이쁜 디자인 사진을 1장 골라서 성유 님에게 보여주거나 내 폰에 찰칵 캡처해 두세요!
STAGE 2-1

📖 어휘 공부: 'AI 비서'와 '코딩'

• **AI 비서 (챗GPT):** 밤낮없이 우리 대신 복잡한 영어를 척척 짜주는 착하고 똑똑한 직원이에요.
• **코딩:** AI 친구에게 내리는 다정한 '요리 주문서(레시피)'랍니다. 우리가 직접 외울 필요는 전혀 없어요!

💡 핵심: 힘든 일은 AI 친구가 다 하고, 우리는 지휘만 하면 돼요!
STAGE 2-2

🎯 실습 미션 2: AI 친구에게 사진 보여주기

챗GPT 앱을 켜서 아까 캡처한 이쁜 디자인 사진을 쏙 올리고, 아래 문장을 그대로 전송해 보세요!

"이 사진 느낌을 살려서 에어컨 수리 업체용 모바일 랜딩 페이지 코드를 짜줘."
미션: AI 친구가 코드를 와르르 쏟아내게 만들고, [복사하기] 버튼을 톡 눌러보세요!
STAGE 3-1

📖 어휘 공부: 마법의 모자 '.html'

스마트폰이나 메모장에 글을 그냥 쓰면 평범한 일기장이 돼요. 하지만 파일 이름 끝에 **`.html`**이라는 마법의 모자를 씌워주면, 컴퓨터와 폰이 "아! 이건 진짜 인터넷 웹페이지구나!" 하고 알아차린답니다.

🎩 기억하기: 저장할 때 뒤에 붙는 `.html`은 웹페이지로 변신시켜주는 마법의 주문이에요!
STAGE 3-2

🎯 실습 미션 3: 메모장에 넣고 저장하기

하얀 메모장(또는 코드 앱)을 열고 복사한 코드를 [붙여넣기] 하세요. 그리고 저장할 때 이름을 아래처럼 적어줍니다.

index.html
미션: 뒤에 `.html`을 꼭 붙여서 파일로 안전하게 저장해 보세요!
STAGE 4-1

📖 개념 이해하기: 내 손으로 열어보기

방금 저장한 파일을 마우스로 두 번 톡톡 치거나(더블클릭) 터치하면, 진짜 인터넷 창이 열리면서 내 랜딩 페이지가 살아 움직여요. 내 눈으로 변화를 직접 확인하는 가장 짜릿한 순간이죠!

👀 변화 보기: 내가 만든 전단지가 스마트폰 화면처럼 이쁘게 뜨는지 구경해요.
STAGE 4-2

🎯 실습 미션 4: 글씨와 색상 고쳐달라 하기

마음에 안 드는 글씨나 색상이 있나요? 다시 챗GPT 친구에게 말해서 쓱쓱 바꿔달래요.

"상단 제목을 'Austin Best HVAC'으로 바꿔주고, 버튼을 이쁜 파란색으로 해줘."
미션: 수정된 코드를 다시 복사해서 메모장에 덮어쓰고, 새로고침(F5)을 눌러 화면이 바뀐 걸 확인하세요!
STAGE 5-1

📖 어휘 공부: '호스팅(인터넷 집 짓기)'

내가 만든 이 멋진 랜딩 페이지를 내 컴퓨터 속에만 두면 전 세계 사람들이 볼 수 없겠죠? 전 세계 누구나 접속할 수 있도록 인터넷상에 무료로 보금자리를 마련해 주는 걸 '호스팅'이라고 해요.

🏡 개념: 넷리파이(Netlify)라는 착한 무료 사이트에 폴더를 슥 밀어 넣으면 끝나요!
STAGE 5-2

🎯 실습 미션 5: 내 웹주소 만들기

바탕화면에 `my-landing` 폴더를 만들고 `index.html`을 쏙 넣은 뒤, 넷리파이(netlify.com) 사이트에 마우스로 슥 밀어 넣어보세요!

미션: 1초 만에 뚝딱 만들어진 나만의 신기한 인터넷 주소를 클릭해서 세상에 공개된 페이지를 구경하세요! 🎉
FINAL STAGE

🏆 종합 실전: 처음부터 끝까지 혼자 해보기!

우와, 정말 수고 많으셨어요! 지금까지 우리는 이쁜 디자인 찾기 ➡️ AI 비서 부르기 ➡️ 메모장 저장하기 ➡️ 화면 확인하기 ➡️ 인터넷에 띄우기까지 모든 조각을 다 배웠어요.

자, 이제 이 모든 과정을 처음부터 끝까지 온전히 내 힘으로 한 번 쭉 처음부터 끝까지 이어서 멋진 지붕 공사(Roofing) 랜딩 페이지를 완성해 볼까요? 🚀

🌟 마지막 대망의 미션: 처음부터 끝까지 혼자의 힘으로 새로운 랜딩 페이지를 무사히 완성해 보세요! 당신은 이미 멋진 웹사이트 마스터랍니다! 💖🥂
진행률: 8.3% (1/12 단계)