WordPress 실습 강의 · Cornell Style

Local에서 만든 WordPress를
Cafe24 서버에 반영하기

오늘 배울 단 하나의 핵심 —
내 컴퓨터(연습 주방)진짜 서버(손님 받는 가게) 를 구분하는 법.

👨‍🏫

여러분, 요리를 배울 때 집 주방에서 연습하고, 손님은 진짜 식당에서 받죠? 웹사이트도 똑같습니다. 오늘 이 한 문장만 가져가세요 — "만드는 곳과 파는 곳은 다르다."

02 · 전체 흐름 한눈에

만들기 → 옮기기 → 켜기, 딱 세 동작

STEP 1
💻
Local에서 사이트 생성
내 컴퓨터
STEP 2
🛠️
VS Code·Codex·Claude
코드 제작
STEP 3
🚚
ZIP·FileZilla로 전송
서버로 이사
STEP 4
🔌
플러그인 활성화
Cafe24 WP
STEP 5
🌐
실제 홈페이지 확인
손님 도착
👨‍🏫

초록 두 칸은 내 컴퓨터 안, 파랑 세 칸은 인터넷 위입니다. 색이 바뀌는 3번 칸(🚚)이 바로 "이사하는 순간"이에요.

03 · 도구별 역할

여섯 개 도구, 각자 맡은 일이 다릅니다

초록 = 내 컴퓨터 파랑 = 진짜 서버
💻

Local 앱

내 컴퓨터 안의 개발용 워드프레스. 연습 주방.

제작
📝

VS Code

코드를 쓰고 고치는 편집기. 요리 작업대.

제작
🤖

Codex / Claude Code

코드를 만들고 다듬는 AI 조수.

제작
🚚

FileZilla

내 파일을 서버로 옮기는 이삿짐 트럭(FTP/SFTP).

전송
🏪

Cafe24

실제 홈페이지가 24시간 돌아가는 호스팅 서버.

운영
🧩

WordPress

서버에서 홈페이지를 보여주는 진열 시스템(CMS).

운영
04 · Local 앱의 진짜 역할

Local은 "연습 주방"입니다

💻 Local이 하는 일

  • 내 컴퓨터에서 사이트를 만들고 테스트
  • 마음껏 부수고 다시 고쳐도 안전
  • 인터넷 손님은 여기 못 들어옴

🧠 꼭 기억할 것

  • Local은 실제 서버가 아니다
  • Local을 꺼도 Cafe24 홈페이지는 멀쩡
  • 집 주방 불을 꺼도 가게는 영업 중
👨‍🏫

학생들이 제일 많이 놀라는 지점이에요. "제 컴퓨터 껐는데 왜 사이트가 살아있죠?" → 당연합니다. 손님 받는 가게는 Cafe24에 따로 있으니까요.

05 · FileZilla · 이삿짐 트럭

왼쪽은 우리집, 오른쪽은 가게

🖥️ 내 컴퓨터 (왼쪽) 🏪 Cafe24 서버 (오른쪽) 📁 homepage-work-plugin 📁 /www/wp-content/plugins/… 🚚 드래그 = 전송
👨‍🏫

FileZilla 화면은 늘 두 칸입니다. 왼쪽 = 내 컴퓨터, 오른쪽 = 서버. 플러그인 폴더를 왼쪽에서 오른쪽으로 끌어다 놓으면 이사가 끝나요.

06 · 플러그인은 어디에 놓나

"플러그인 방"에 정확히 넣기

가게(서버)에는 정해진 플러그인 방 주소가 있습니다. 그 방에 넣어야 워드프레스가 알아봅니다.

🖥️ 내 컴퓨터의 폴더
homepage-work-plugin
🏪 Cafe24 서버의 목적지
/www/wp-content/plugins/homepage-work-plugin
👨‍🏫

주소에서 딱 하나만 외우세요 — wp-content/plugins. 워드프레스의 모든 플러그인은 이 방에 삽니다. 이삿짐을 엉뚱한 방에 두면 워드프레스가 "그런 플러그인 없는데요?" 합니다.

07 · 켜져 있나? 꺼져 있나?

링크 글씨만 보면 상태를 압니다

🔛 지금 "켜진" 상태

  • 화면에 "비활성화" 링크가 보인다
  • = 지금 눌러 끌 수 있다 = 지금 켜져 있다

전등 스위치에 "끄기"가 보이면? → 지금 켜져 있는 겁니다.

⭕ 지금 "꺼진" 상태

  • 화면에 "활성화" 링크가 보인다
  • = 지금 눌러 켤 수 있다 = 지금 꺼져 있다

스위치에 "켜기"가 보이면? → 지금 꺼져 있는 겁니다.

👨‍🏫

버튼 글씨는 "지금 상태"가 아니라 "누르면 할 일"이에요. 플러그인 목록에서 Homepage Work 옆 글씨만 보면 됩니다.

08 · 실제 접속 주소

손님이 실제로 들어오는 문

🌐

Cafe24 WordPress 홈

https://hugokim.mycafe24.com
🛒

온라인 스토어 결제 확인

https://hugokim.mycafe24.com/online-store/#slice-store-checkout
👨‍🏫

이 주소들은 전부 파랑(서버)이죠? 손님은 언제나 이 문으로 들어옵니다. 내 컴퓨터 주소(localhost)로는 손님이 절대 못 와요.

09 · 오늘의 핵심 구분

불을 꺼도 되는 것 vs 계속 켜두는 것

🟢 Local 앱 · FileZilla 는 홈페이지를 계속 켜두는 프로그램이 아닙니다. 필요할 때만 켜는 도구예요.
🔵 실제 홈페이지는 Cafe24 서버에서 24시간 스스로 돌아갑니다.
✅ 서버에 올리고 → 워드프레스에서 활성화하면, Local과 FileZilla는 꺼도 됩니다.
👨‍🏫

이삿짐 트럭(FileZilla)은 이사 끝나면 돌려보내죠? 가게(Cafe24)는 그대로 영업합니다. 트럭을 24시간 세워둘 필요가 없어요.

10 · 한 줄 결론

오늘 강의를 한 문장으로

Local에서 만들고, VS Code·Codex·Claude Code로 수정한 뒤,
FileZilla 또는 워드프레스 플러그인 업로드 기능으로
Cafe24 WordPress에 배포한다.
👨‍🏫

여기까지가 정규 강의였습니다. 그런데… 잘 따라와 준 여러분에게 워드프레스 숨은 꿀 기능 하나를 선물로 드릴게요. 다음 장 넘겨보세요 🎁

🎁 선물 · 아무도 안 알려주는 꿀 기능

워드프레스에는 "타임머신"이 숨어 있습니다

⏪ 리비전(Revisions) — 자동 저장된 과거 버전

글이나 페이지를 고칠 때마다 워드프레스가 이전 버전을 몰래 저장해 둡니다. 실수로 다 지워도, 어제 버전으로 클릭 한 번에 복원. 게임 세이브 포인트처럼요.

① 글 편집 화면 열기 ② 우측 "리비전 N개" 클릭 ③ 슬라이더로 과거와 비교 ④ "이 리비전 복원"

🍎 One more thing. — 같은 디자인을 여러 곳에 쓸 땐 동기화 패턴(Synced Patterns). "붕어빵 틀"이라 하나만 고치면 그 틀로 찍은 모든 자리가 한 번에 바뀝니다. 수정 지옥에서 해방되세요.

1 / 11
← → 방향키 · Space 로 넘기기 · 인쇄(⌘P) 하면 PDF·슬라이드로 저장됩니다