첫 웹페이지, 현직자도 이렇게 시작해요

직전 글을 올리고 나서 머릿속에 제일 많이 맴돈 질문이 하나 있었어요.

“근데 저도 진짜 만들 수 있나요?”

그 글이 어디까지 되나·토큰 비용·뭘 만들고 싶은지를 다뤘다면, 이 글은 한 단계 더 들어가요.
실제로 친구들 옆에서 첫 웹 한 장을 같이 만들어본 기록이에요. 어디서 막혔고, 그 막힘을 어떻게 풀었는지.

만들고 싶은 건 있는데 어디서 시작해야 할지 막막한 분들 있죠.
결론부터 말하면, 됩니다. 비전공자인 제 친구들도 결국 자기 페이지를 띄웠거든요.

배우고 시작에서, 시작하고 배우는 순서로

예전엔 개발을 시작하려면 일단 “다 배워야” 했어요. 국비교육 풀스택 과정만 봐도 평균 약 6개월(900시간) 이상이에요(고용노동부 보도자료).

그게 시작 조건이던 시절이었어요. 지금은 순서가 바뀌었죠.
시작해놓고 막히는 데만 배우는 쪽이 가능해졌어요.

기본기를 안 배워도 된다는 얘긴 아니에요. 막힌 지점이 곧 다음 공부 주제가 되는 거예요.

코드를 굳이 읽지 않아도 돼요. 화면에서 내가 원한 대로 나왔는지, 그거 하나만 보고 다음으로 넘어가요. 뭔가 이상하면 그 이상한 화면이 곧 다음에 배울 지점이고요.

친구들 옆에서 지켜본 게 딱 이거예요. 비전공자인데도 일단 한 장을 띄우고 나면, 그다음 질문이 알아서 생겨요.

참고로 직전 글은 어디까지 AI로 되나·토큰이 곧 돈이라는 한계·뭘 만들고 싶은지부터를 다뤘어요. 이 글은 그 위에서 실제로 한 장을 만드는 핸즈온이에요. 친구들과 어디서 막혔고 그걸 어떻게 넘겼는지가 척추예요.

첫 프로젝트는 웹 한 장, 파일 더블클릭이면 끝나요

앱이 아니라 웹에서 시작하는 이유가 있어요. 웹은 파일 더블클릭이면 내 PC 브라우저에서 바로 보여요.

앱은 스토어 심사·기기 빌드 같은 장벽이 먼저 나와요.

웹은 기본기 자체가 강력하다고 생각해요.
HTML·CSS·JS 한 파일이면 화면 하나가 완성돼요. 추가 환경 설정 거의 없이요.

저도 현업에서 아이디어를 빠르게 공유할 때 이걸 자주 써요. 기획 회의 중에 “이런 느낌 어때요” 하면서 한 파일짜리 HTML로 프로토타입 만들어서 던지는 식이에요. 백 마디 설명보다 실제로 움직이는 화면 하나가 훨씬 빨리 합의를 만들거든요.

바이브코딩이 이 쪽에서 특히 잘 통하는 것도 같은 이유예요. 결과물이 바로 눈에 보이니까, 화면이 이상하면 누구든 금방 알아채고 다시 시킬 수 있어요. 화면은 멀쩡한데 방향이 어긋난 경우를 알아채는 건 아직 개발자 쪽이 빠르지만, 그 감도 직접 해볼수록 붙어요. AI가 없을 때보다, 코딩하다 포기하게 되는 지점이 많이 줄었어요.

만만한 첫 프로젝트 후보를 보면요.

• 포트폴리오 한 장 — 이름·스킬·연락처 담은 정적 페이지
• 프로필 페이지 — 자기소개·링크 모음
• 1인 창업 랜딩 — 서비스 소개·연락 버튼(CTA)
• 카운트다운 — 날짜 하나 입력하면 D-day 계산
• 책 추천 리스트 — 읽은 책, 한 줄 감상 모아두기

공통점이 하나 있어요. 서버도 DB도 없이 파일 하나면 돼요.

이 시리즈는 이 중 하나를 골라 끝까지 같이 키워가요. 나를 알리는 소개 페이지 한 장이에요. 이름·하는 일·연락처를 담은 그 한 장에, 앞으로 편마다 내 도메인·목록·문의 폼을 하나씩 붙여 진짜 쓰는 페이지로 만들 거예요. 예제만 소개 페이지일 뿐, 위 후보 중 끌리는 걸로 바꿔 따라와도 흐름은 똑같아요.

첫 한 장에 필요한 재료는 딱 이만큼

코딩이 막막한 이유 중 하나가, 모르는 단어가 한꺼번에 쏟아진다는 거예요. 근데 첫 정적 한 장엔 이 정도만 알면 돼요.

정적 페이지부터 시작하면 됩니다. 인쇄된 메뉴판처럼 내용이 고정된 한 장이라, 서버도 DB도 필요 없어요. 그 한 장을 이루는 재료는 셋이에요.

이걸 외울 필요는 없어요. ‘색은 CSS, 동작은 JS’ 정도로 누가 뭘 맡는지 감만 있으면 돼요. 바꾸고 싶은 게 생기면 그 말 그대로 AI에게 시키면 돼요. 코드를 꼭 읽어야 시작할 수 있는 건 아니에요.

여기에도 순서가 있어요. 일단 만들 수 있다가 1단계예요. 코드가 눈에 들어오는 건 그다음이고, 효율·토큰 최적화는 더 뒤에 자연스럽게 따라와요.

친구들을 보면 이 순서를 뒤집는 데서 막혀요. 첫 줄도 안 썼는데 변수·함수부터 외우려다 지치는 거죠. 처음부터 다 챙기려다 시작 자체를 못 하는 게 제일 아쉬워요.

AI가 준 코드는 어디에 붙여넣나

여기서 친구들이 제일 많이 멈칫했어요. AI는 코드를 글자로만 줘요. 그 글자를 파일 하나로 저장해야 브라우저가 웹페이지로 읽어요. 작업 자리는 두 개면 돼요. 대화할 창, 그리고 코드를 담을 파일 하나.

대화할 창은 평소 쓰던 데면 돼요. ChatGPT나 Claude 웹페이지에 로그인만 하면 끝이에요. 따로 뭘 설치할 것도 없어요.

새로 하는 동작은 딱 하나예요. 받은 코드를 파일로 만드는 거요.

먼저 편집기를 하나 깔아요. 윈도우 메모장으로도 되긴 하는데, 무료 편집기 **VS Code**를 권해요. 링크를 열면 큰 파란 버튼이 보여요. 내 컴퓨터에 맞는 것(윈도우면 Windows, 맥이면 Mac)을 누르면 설치 파일이 받아져요. 맥은 버튼이 여러 개로 보이면 ‘Universal’을 고르면 어느 맥이든 맞아요. 받은 파일을 실행하고 계속 다음만 눌러도 설치가 끝나요. 코드에 색이 입혀져서 뭘 잘못 붙였는지 눈에 바로 보이거든요. 메모장은 그 색이 없어서 초보일수록 실수가 안 보여요.

깔았으면, AI한테 받은 코드를 이 순서로 저장해요. 코드를 받는 건 바로 아래 ‘4단계’에서 하니, 지금은 저장하는 손동작만 눈에 익혀두면 돼요.

1. 바탕화면에 폴더를 하나 만들어요. 이름은 my-web 정도면 충분해요.
2. VS Code를 열고 위 메뉴에서 File → New File(윈도우는 Ctrl+N, 맥은 Cmd+N)로 빈 문서를 하나 열어요. 처음 켜면 안내 탭이 떠 있는데, 새 문서를 열어야 붙여넣을 자리가 생겨요.
3. AI가 준 코드를 복사해요. 채팅 코드 상자 오른쪽 위 ‘복사’ 버튼을 쓰면 통째로 깔끔하게 복사돼요. 그걸 빈 문서에 붙여넣어요.
4. Ctrl+S(맥은 Cmd+S)를 눌러요. 저장 창이 뜨면 왼쪽에서 ‘바탕화면’을 골라 방금 만든 my-web 폴더를 연 다음, 파일 이름을 정확히 index.html로 저장해요.

여기까지가 복붙 방식이에요. 손에 익으면 복사·붙여넣기 자체가 사라지는 길도 있어요. Cursor나 Claude Code 같은 도구는 대화만 하면 파일을 알아서 만들고 고쳐줘요. 저는 실무에선 이쪽을 쭉 써요. 다만 설치·설정이 한 겹 더 얹혀서, 첫 한 장은 웹챗 복붙이 제일 덜 막히더라고요. 지금은 복붙으로 시작하고, 도구는 익숙해진 뒤에 갈아타면 돼요.

저라면, 친구들과 실제로 밟은 순서 4단계

옆에서 도와줄 때 늘 이 순서로 잡았어요. 특히 2번 한 파일 요청과 4번 콕 집어 수정, 이 둘에서 토큰이 갈려요.

여기서 친구들이 제일 자주 헛돈 게 4번이었어요. 결과가 마음에 안 들면 “처음부터 다시 만들어줘”를 누르는 거예요. 그러면 됐던 부분까지 새로 짜이면서 토큰이 두세 배로 나가더라고요.
막연히 “해줘”부터 시작한 경우랑, 바꿀 한 가지만 콕 집은 경우의 대화 길이가 눈에 띄게 달랐어요. 정확히 잴 순 없지만 제 개인 관찰이에요.

그래서 하나 챙겨두면 좋아요. 잘 나온 시점의 파일은 index_백업.html처럼 따로 복사해 두세요. 다시 시켰다가 마음에 안 들면 그 파일로 돌아오면 되니까요.

그래서 막힌 장면이 곧 그날의 커리큘럼이 돼요. “왜 전체를 다시 짜면 안 되지?”가 떠오른 순간, 토큰이란 단어가 필요해진 단어가 되거든요. 막힌 지점이 가장 정확한 커리큘럼이에요. 토큰이 왜 곧 돈인지는 직전 글에서 따로 풀어뒀어요.

모르는 단어는 메모만 해두세요

처음 시작하면 낯선 단어들이 쏟아져요. DB, 서버, 클라우드, 도메인, 배포 — 이런 것들이요.

근데 만만한 첫 웹은 이 중 어느 것도 필요 없어요. 파일 하나면 돼요.

그러니까 모르는 단어가 나오면 멈추지 말고 메모장에 한 줄만 적어두세요.

이게 전부예요. 처음엔 이 목록이 길어도 괜찮아요.

정적 한 장을 끝내고 나면 자연스럽게 다음 욕구가 생겨요.

“버튼 누르면 이 데이터가 저장됐으면 좋겠다”는 생각이 드는 순간, DB가 필요한 단어가 되거든요.
그때 찾아보면 훨씬 빨리 이해돼요. 필요해진 다음에 배우는 게 가장 빠른 학습이에요.

그걸 그대로 AI에게 물어보면 순서대로 하는 법까지 어느 정도 알려줘요.

주의점 3가지

다음 단계, 내 페이지를 세상에 내놓기

내 PC 브라우저에 마음에 드는 페이지가 뜨고 나면, 자연스럽게 드는 생각이 있어요.
“이거 세상에 알리고 싶다.”

그때가 인터넷에 올려볼(배포할) 타이밍이에요. 내 주소(도메인)는 그다음, Part 4에서 달아요. 지금은 공짜 임시 주소부터 받아요.

저는 Cloudflare Pages를 추천해요. 내 PC에 있는 파일을 그대로 끌어다 올리면 끝이고, 개인 페이지는 무료 범위 안에서 다 돌아가요.

나중에 내용을 고치면, Cloudflare에서 그 프로젝트를 열고 ‘Create new deployment(새 배포 만들기)‘를 눌러 수정한 폴더를 다시 끌어다 놓으면 반영돼요. Vercel·Netlify도 폴더만 끌어다 놓으면 되는 비슷한 선택지고요. 내 도메인 다는 건 Part 4에서 이어가요. 해보면 진짜 클릭 몇 번이에요.

제 주위 친구들한테도 시켜봤어요. 다들 해내요.
조금씩 헤매긴 해도 결국 자기 페이지에 자기 도메인 붙여서 “이거 맞냐고” 링크 보내주더라고요.

개발이 본업이 아니어도 괜찮아요.
지금 본업에서 하는 일들, 그게 오히려 더 어렵잖아요. 처음 한 번만 넘기면, 그다음부턴 일이 아니에요.

레스덕의 정리

진입장벽이 무너졌다는 게 제가 하고 싶은 말이에요. 예전엔 풀세트를 다 배워야 첫 줄을 쓸 수 있었는데, 지금은 시작하면서 배우는 흐름이 가능해졌어요.

만만한 웹 한 장을 끝내보면, 다음에 뭐가 필요한지 본인이 알게 되죠. 모르는 단어는 메모해두고, 필요해지면 그때 찾아보면 돼요. 직전 글에서 말한 것처럼, 막힌 지점이 가장 정확한 커리큘럼이에요.

저도 개발이 직업이라 이쪽은 익숙하지만, 올해 들어 블로그·사이드처럼 안 하던 걸 일부러 벌여 보고 있어요. 막상 해보니 결국 중요한 건 일단 해보기더라고요. 나만의 페이지 하나, 이렇게 가져보면 어때요?

혹시 하다가 막히거나 도움이 필요하시면 메일이나 SNS로 편하게 연락주세요.
완벽한 답을 드릴 순 없어도, 같이 고민해보고 제 생각 정도는 나눠드릴 수 있을 것 같아요.