개념을 배우고 딱 하나씩 실습해보는 다정한 시간 ✨
컴퓨터가 조금 낯설어도 걱정하지 마세요. 남편인 성유 님이 파일 여는 것을 도와줄 거예요. 우리는 조급해하지 않고, 아주 작은 조각부터 하나씩 맞춰갈 거랍니다.
인터넷 세상에서 복잡하고 큰 쇼룸(웹사이트)이 아니라, 손님이 구경하다가 마음에 쏙 들어서 무조건 **'전화하기'** 버튼을 누르게 만드는 **예쁜 한 장짜리 전단지**예요!
개념을 배웠으니 첫 번째 미션을 해볼까요? 스마트폰에서 핀터레스트 앱을 켜고 아래 영단어를 검색해 보세요!
• **AI 비서 (챗GPT):** 밤낮없이 우리 대신 복잡한 영어를 척척 짜주는 착하고 똑똑한 직원이에요.
• **코딩:** AI 친구에게 내리는 다정한 '요리 주문서(레시피)'랍니다. 우리가 직접 외울 필요는 전혀 없어요!
챗GPT 앱을 켜서 아까 캡처한 이쁜 디자인 사진을 쏙 올리고, 아래 문장을 그대로 전송해 보세요!
스마트폰이나 메모장에 글을 그냥 쓰면 평범한 일기장이 돼요. 하지만 파일 이름 끝에 **`.html`**이라는 마법의 모자를 씌워주면, 컴퓨터와 폰이 "아! 이건 진짜 인터넷 웹페이지구나!" 하고 알아차린답니다.
하얀 메모장(또는 코드 앱)을 열고 복사한 코드를 [붙여넣기] 하세요. 그리고 저장할 때 이름을 아래처럼 적어줍니다.
방금 저장한 파일을 마우스로 두 번 톡톡 치거나(더블클릭) 터치하면, 진짜 인터넷 창이 열리면서 내 랜딩 페이지가 살아 움직여요. 내 눈으로 변화를 직접 확인하는 가장 짜릿한 순간이죠!
마음에 안 드는 글씨나 색상이 있나요? 다시 챗GPT 친구에게 말해서 쓱쓱 바꿔달래요.
내가 만든 이 멋진 랜딩 페이지를 내 컴퓨터 속에만 두면 전 세계 사람들이 볼 수 없겠죠? 전 세계 누구나 접속할 수 있도록 인터넷상에 무료로 보금자리를 마련해 주는 걸 '호스팅'이라고 해요.
바탕화면에 `my-landing` 폴더를 만들고 `index.html`을 쏙 넣은 뒤, 넷리파이(netlify.com) 사이트에 마우스로 슥 밀어 넣어보세요!
우와, 정말 수고 많으셨어요! 지금까지 우리는 이쁜 디자인 찾기 ➡️ AI 비서 부르기 ➡️ 메모장 저장하기 ➡️ 화면 확인하기 ➡️ 인터넷에 띄우기까지 모든 조각을 다 배웠어요.
자, 이제 이 모든 과정을 처음부터 끝까지 온전히 내 힘으로 한 번 쭉 처음부터 끝까지 이어서 멋진 지붕 공사(Roofing) 랜딩 페이지를 완성해 볼까요? 🚀