코드란 무엇일까? HTML·CSS·JavaScript와 AI 코딩 쉽게 이해하기

“AI에게 홈페이지를 만들어 달라고 했더니 코드를 작성했다는데, 코드가 도대체 뭔가요?” 코덱스(Codex)나 ChatGPT로 홈페이지를 만들어 보려다 보면 ‘코드를 수정했습니다’, ‘코드에 오류가 있습니다’, ‘테스트를 실행했습니다’ 같은 말을 접하게 됩니다.

그림: 웹 코드는 브라우저 화면의 여러 부분을 만듭니다 · 실제 웹 서비스는 서버·데이터·설정도 함께 사용합니다.

코딩을 배운 적이 없다면 검은 화면에 영어와 기호가 가득한 모습부터 떠오를 수 있습니다. 하지만 코드의 핵심은 컴퓨터에 무엇을 어떻게 처리해야 하는지 알려주는 내용이라는 데 있습니다. 코드(Code)는 프로그램이나 웹페이지가 어떤 구조를 갖고, 어떤 동작을 하도록 할지 표현한 명령·규칙·설명 등의 집합입니다. 모든 코드가 사람이 읽을 수 있는 문자로 되어 있거나 직접 실행되는 것은 아닙니다. 그래도 처음에는 ‘컴퓨터가 알아서 일하도록 작성한 설계와 지시’라고 이해하면 충분합니다. 이번 글에서는 실제 블로그 화면을 예로 들어 코드의 종류와 역할을 살펴보고, AI가 코드를 만들었을 때 무엇을 확인해야 하는지도 알아보겠습니다.

1. 코드는 요리의 '레시피'와 비슷합니다

요리사에게 “맛있는 빵을 만들어 주세요”라고만 말해도 요리를 시작할 수는 있습니다. 하지만 정확한 결과를 얻으려면 재료, 순서, 온도, 시간이 필요합니다. 레시피에 “밀가루를 준비한다 → 재료를 섞는다 → 반죽한다 → 오븐에 굽는다”라고 쓰는 것과 비슷하게, 프로그램에도 해야 할 일과 처리 방법을 정해 놓을 수 있습니다. 예를 들어 블로그 방문자가 ‘문의하기’ 버튼을 누르면 안내 메시지가 뜨게 하고 싶다고 해보겠습니다. 우리가 바라는 동작은 다음과 같습니다.

방문자가 버튼을 누르면 “문의해 주셔서 감사합니다”라는 안내가 나타난다.

이 요구를 실제로 구현하려면 프로그램에서 버튼을 찾고, 누르는 동작을 감지하고, 메시지를 표시하도록 만들어야 합니다. 이런 작업을 기술적으로 표현한 것이 코드입니다. 다만 코드는 하나의 레시피처럼 언제나 순서대로만 실행되는 것은 아닙니다. 버튼을 누르는 순간처럼 특정 사건이 발생할 때 실행되도록 만들 수도 있습니다.

2. 웹사이트 코드는 HTML·CSS·JavaScript로 나눠 이해하면 쉽습니다

초보자에게 가장 가까운 사례는 웹사이트입니다. 웹페이지의 기본 요소를 설명할 때 보통 세 가지 기술을 소개합니다.

기술	주요 역할	빵집 홈페이지에 비유하면
HTML	글·이미지·버튼 등의 구조와 의미	어떤 메뉴와 버튼이 있는지 정하기
CSS	색상·글꼴·간격·배치 등 디자인	메뉴판을 보기 좋게 꾸미기
JavaScript	클릭·입력 등 사용자 동작에 반응	버튼을 눌렀을 때 안내 띄우기

집을 만드는 과정에 비유하면 HTML은 벽과 방의 구조, CSS는 색과 가구 배치, JavaScript는 전등 스위치 같은 동작을 맡습니다. 여기서 작은 차이도 알아두면 좋습니다. HTML은 마크업 언어이고 CSS는 스타일을 지정하는 언어입니다. JavaScript는 프로그램의 동작을 구현하는 프로그래밍 언어입니다. 우리는 세 가지를 모두 넓은 의미의 ‘웹사이트 코드’라고 부르지만, HTML과 CSS를 JavaScript와 완전히 같은 종류의 프로그래밍 언어로 설명하는 것은 정확하지 않습니다. 또한 모든 웹사이트가 이 세 가지 파일만으로 만들어지는 것도 아닙니다. 서버, 데이터베이스 등 다른 기술을 사용할 수 있습니다.

3. 실제 코드는 어떻게 생겼을까요?

복잡한 프로그램을 볼 필요는 없습니다. ‘우리 동네 빵집’이라는 제목과 버튼 하나가 있는 아주 작은 화면을 떠올려 보겠습니다. 먼저 HTML로 제목과 버튼을 만들 수 있습니다.

<h2>우리 동네 빵집</h2>
<button id="greet">인사하기</button>

여기서 <h2>는 제목을 나타내는 HTML 요소이고, <button>은 누를 수 있는 버튼을 만듭니다. id="greet"는 나중에 이 버튼을 구별할 수 있도록 붙인 이름입니다. 이번에는 제목 색상을 꾸며 보겠습니다.

h2 {
  color: purple;
}

이 코드는 해당 제목의 글자색을 보라색으로 지정하는 CSS 규칙입니다. 마지막으로 버튼을 클릭했을 때 안내 창이 나타나게 할 수 있습니다.

document.querySelector("#greet")
  .addEventListener("click", () => {
    alert("어서 오세요!");
  });

이 JavaScript 예시는 페이지에서 greet라는 ID의 버튼을 찾고, 사용자가 그 버튼을 누르면 안내 메시지를 표시하도록 합니다. 세 코드는 같은 웹페이지에 올바른 위치와 순서로 연결했을 때 함께 작동하는 교육용 예시입니다. 각각을 아무 위치에나 붙여 넣는다고 모두 정상 작동한다는 뜻은 아닙니다. 지금 코드를 외울 필요는 없습니다. 중요한 것은 같은 화면이라도 구조·디자인·동작을 담당하는 코드가 다를 수 있다는 점입니다.

4. 코드와 실제 화면은 왜 서로 다르게 보이나요?

코드에는 <button> 같은 기호가 있지만, 방문자가 보는 웹페이지에는 실제 버튼이 나타납니다. 왜 그럴까요? 웹브라우저가 웹페이지에 필요한 파일을 읽고, 구조와 스타일을 해석해 화면을 만들어 주기 때문입니다. JavaScript가 실행되면 화면의 일부가 바뀌거나 버튼에 반응할 수도 있습니다. 간단히 정리하면 다음과 같습니다. 작성된 웹 코드 → 브라우저의 처리 → 방문자가 보는 화면과 기능 하지만 모든 프로그램이 웹브라우저에서 실행되는 것은 아닙니다.

스마트폰 앱, 게임, 서버 프로그램은 서로 다른 실행 환경을 사용할 수 있습니다. 일부 코드는 실행 전에 컴파일 과정 등을 거치기도 합니다. 이 때문에 코드 파일을 더블클릭한다고 모든 프로그램이 바로 실행되는 것은 아닙니다. 코드가 존재한다는 사실과 실제 프로그램이 정상적으로 동작한다는 사실은 다릅니다.

5. '소스 코드'와 '프로그램'은 같은 것인가요?

둘은 관련 있지만 같은 뜻은 아닙니다. 소스 코드(Source Code)는 사람이 작성하고 수정할 수 있는 형태의 코드입니다. 웹사이트의 HTML 파일이나 JavaScript 파일, Python 프로그램의 소스 파일 등이 대표적인 예입니다. 프로그램(Program)은 특정 기능을 수행하도록 만들어진 소프트웨어를 말합니다. 소스 코드뿐 아니라 실행에 필요한 다른 파일이나 환경이 함께 필요할 수 있습니다. 여기서 초보자가 자주 만나는 파일 이름도 정리해 보겠습니다.

파일 이름 예시	대개 맡는 역할
`index.html`	홈페이지의 기본 구조
`style.css`	페이지 색상과 레이아웃
`main.js`	버튼 클릭 등 동적인 동작
`app.py`	Python으로 작성된 프로그램 코드
`logo.png`	코드가 아니라 화면에 사용할 이미지 파일

이 파일명은 예시입니다. 실제 프로젝트는 다른 이름과 구조를 사용할 수 있습니다. 또한 이미지나 사용자 데이터 같은 것은 코드와 구별해서 관리하기도 합니다. 실제 서비스에서는 코드, 설정, 콘텐츠, 데이터가 서로 협력해 기능을 구성합니다.

6. 코드를 수정한다는 말은 무엇을 바꾸는 것인가요?

코드를 수정한다고 하면 굉장히 큰 작업처럼 들릴 수 있습니다. 하지만 실제로는 화면의 문구 하나를 바꾸는 작은 수정일 수도 있습니다. 예를 들어 HTML에 다음 내용이 있었다고 생각해 보세요.

<button>문의하기</button>

이것을 다음처럼 고치면 어떻게 될까요?

<button>상담 요청</button>

해당 버튼을 표시하는 다른 코드와 조건이 같다면 버튼의 글자가 달라집니다. 반면 버튼의 글자색을 바꾸려면 CSS를 수정해야 할 수 있고, 클릭했을 때 어떤 일이 일어나는지 바꾸려면 JavaScript나 서버의 코드를 수정해야 할 수도 있습니다. 따라서 “버튼을 고쳐 줘”라는 말만으로는 원하는 수정이 정확히 무엇인지 알기 어렵습니다. 이렇게 요청하면 더 명확합니다.

홈페이지의 '문의하기' 버튼에서 보이는 글자만 '상담 요청'으로 바꿔 줘. 버튼의 크기, 색상, 클릭 후 이동하는 주소는 그대로 유지해 줘.

AI에게 코딩을 맡길 때도 중요한 것은 기술 용어를 많이 사용하는 능력보다 바꾸려는 결과와 유지할 조건을 구체적으로 설명하는 것입니다.

7. 코덱스는 코드를 어떻게 다루나요?

코덱스(Codex)는 코딩과 소프트웨어 개발 작업을 돕는 AI 도구입니다. 지원되는 작업 환경에서는 프로젝트의 파일을 살펴보고, 코드를 작성하거나 수정하며, 필요한 명령이나 테스트를 실행해 결과를 확인할 수 있습니다. 예를 들어 이런 요청을 할 수 있습니다. 현재 홈페이지에서 모바일 화면의 제목이 오른쪽으로 잘려 보여. 관련 코드를 먼저 확인하고, 다른 디자인은 유지하면서 문제를 수정해 줘. 수정한 파일과 확인한 테스트를 알려 줘.

이 작업에는 여러 단계가 있을 수 있습니다. ① 조사: 어떤 파일이 제목을 표시하고 어떤 스타일이 적용됐는지 확인합니다. ② 수정: 원인과 관계있는 코드만 변경합니다. ③ 검증: 화면과 기능이 예상대로 작동하는지 테스트합니다. ④ 보고: 무엇을 바꿨고 무엇을 확인하지 못했는지 알려 줍니다. 그러나 AI가 코드를 작성했다는 사실만으로 수정이 올바르다고 확정할 수는 없습니다. 코덱스도 잘못된 파일을 고르거나, 일부 조건을 놓치거나, 필요한 테스트를 충분히 실행하지 못할 수 있습니다. 특히 외부 서비스 접속 권한, 실제 배포 상태, 테스트 환경이 없는 경우에는 할 수 있는 확인 작업에 제한이 있습니다.

8. '코드 작성', '테스트 통과', '배포 완료'는 서로 다릅니다

홈페이지를 만들 때 자주 등장하는 세 표현이 있습니다. 코드 작성 완료: 필요한 프로그램 파일을 만들거나 수정했다는 의미입니다. 테스트 통과: 정해 놓은 검사에서 기대한 결과가 확인됐다는 의미입니다. 배포 완료: 수정된 결과물을 실제 사용자가 접근할 수 있는 환경에 올렸다는 의미입니다. 예를 들어 AI가 제목 색상을 바꾸는 코드를 수정했더라도, 브라우저에서 올바르게 표시되는지 확인하지 않았다면 아직 화면 검증은 끝나지 않았습니다. 브라우저 테스트까지 통과했더라도 실제 공개 웹사이트에 변경 사항이 반영되지 않았다면 배포는 별도 작업으로 남아 있을 수 있습니다. 그래서 완료 보고를 볼 때는 무엇을 했는지와 무엇을 실제로 확인했는지를 나누어 살펴보는 것이 좋습니다.

표시된 결과	아직 확인해야 할 수 있는 것
코드 수정 완료	원하는 파일만 바뀌었는가?
테스트 통과	어떤 환경과 조건을 검사했는가?
오류 없음	실행하지 않은 기능이나 화면은 없는가?
배포 성공	실제 공개 주소에서 새 내용이 보이는가?

테스트 한 번 통과했다고 모든 상황에서 오류가 없다는 뜻은 아닙니다. 테스트 자체의 품질과 적용 범위도 중요합니다.

9. AI가 작성한 코드를 확인하는 가장 쉬운 방법

프로그래밍을 몰라도 다음과 같이 결과 중심으로 검토할 수 있습니다. 첫째, 바뀐 화면을 확인하세요. 버튼 이름을 변경했다면 정확한 문구로 표시되는지 직접 보는 것이 좋습니다. 둘째, 변경된 파일과 내용을 확인하세요. 코덱스 같은 개발 도구는 어떤 파일의 어떤 부분이 바뀌었는지 차이 보기(diff)를 지원할 수 있습니다. 셋째, 원래 기능이 유지되는지 확인하세요. 문구만 바꾸기로 했는데 버튼을 눌러도 이동하지 않는다면 원하는 수정이라고 보기 어렵습니다.

넷째, 실제로 수행한 검사 결과를 확인하세요. '테스트함'이라는 말만 듣기보다 어떤 테스트를 실행했고 결과가 어땠는지 물어보는 편이 좋습니다. 다섯째, 중요한 작업은 복구할 방법을 준비하세요. 프로젝트를 별도로 복사하거나 버전 관리 기능을 이용하면 잘못된 수정에서 복구하는 데 도움이 됩니다. 특히 결제, 개인정보, 회원 계정, 보안 설정이 관련된 코드는 AI의 설명만으로 안전하다고 단정하지 말고 추가 검증을 진행해야 합니다.

10. 코드를 몰라도 AI에게 홈페이지 제작을 맡길 수 있을까요?

일부 작업은 가능합니다. 그러나 '코드를 전혀 몰라도 모든 개발 작업을 검토 없이 완성할 수 있다'는 뜻은 아닙니다. AI에게 필요한 기능을 설명하면 코드를 작성하도록 도움받을 수 있고, 쉬운 수정은 직접 결과를 확인할 수도 있습니다. 예를 들어 처음에는 아주 작은 목표로 시작해 보세요.

개인 독서 기록용 웹페이지를 만들어 줘. 책 제목과 읽은 날짜를 표시하고, 휴대폰에서도 글이 잘 읽히게 해 줘. 먼저 필요한 화면을 간단히 설명한 다음 코드를 만들고 확인 방법을 알려 줘.

처음부터 결제 기능이나 회원 데이터베이스까지 모두 만들기보다, 작은 화면을 완성하고 검증하는 연습부터 해 보는 방법입니다. AI가 작성한 코드가 어느 파일에 있는지, 어떤 환경에서 실행하는지, 실제로 테스트했는지 정도를 확인할 줄 알면 작업을 안전하게 진행하는 데 도움이 됩니다.

자주 묻는 질문

Q. 코드와 코딩은 같은 뜻인가요?

완전히 같지는 않습니다. 코드는 작성된 명령·규칙 등의 내용이고, 코딩(Coding)은 그런 코드를 작성·수정하는 활동을 가리킵니다.

Q. HTML도 프로그래밍 언어인가요?

HTML은 웹페이지의 구조와 의미를 나타내는 마크업 언어입니다. HTML과 CSS는 넓은 의미에서 웹 코드를 구성하지만, JavaScript 같은 프로그래밍 언어와 역할이 다릅니다.

Q. Python과 JavaScript 중 하나만 배워야 하나요?

그럴 필요는 없습니다. 두 언어는 모두 다양한 프로그램을 만드는 데 활용할 수 있고 용도에 따라 선택합니다. 웹브라우저의 상호작용을 이해하고 싶다면 JavaScript를, 간단한 자동화나 데이터 처리를 배우고 싶다면 Python을 시작점으로 고려할 수 있습니다.

Q. AI가 만든 코드는 저절로 실행되나요?

아닙니다. 코드를 어디에 저장하고 어떤 환경에서 실행하느냐에 따라 달라집니다. 일부 개발 도구는 권한이 있는 경우 직접 실행할 수 있지만, 코드가 작성됐다는 사실만으로 실제 실행·배포까지 끝난 것은 아닙니다.

Q. 코드가 길수록 좋은 프로그램인가요?

아닙니다. 코드의 길이만으로 품질을 판단할 수 없습니다. 필요한 기능이 정확히 작동하는지, 이해하고 관리하기 쉬운지, 보안과 성능을 고려했는지 등이 중요합니다.

Q. 코드를 수정하면 기존 글과 사진도 사라질 수 있나요?

수정 범위에 따라 가능합니다. 코드와 콘텐츠가 같은 파일에 저장돼 있거나, 프로그램 변경이 데이터를 삭제·덮어쓰는 동작을 포함할 수 있기 때문입니다. 중요한 프로젝트라면 작업 범위를 제한하고 백업과 변경 내용 확인을 요청하세요.

Q. 코드와 알고리즘은 같은 말인가요?

아닙니다. 알고리즘은 문제를 해결하는 절차나 방법을 뜻하며, 코드는 그 절차를 프로그램에 구현하는 표현이 될 수 있습니다. 알고리즘은 코드가 아니어도 말이나 그림으로 설명할 수 있습니다.

마무리: 코드는 컴퓨터에게 일을 설명하는 방법입니다

코드(Code)는 프로그램과 웹사이트가 어떤 구조를 갖고 어떻게 동작할지 표현하는 내용입니다. 웹사이트에서는 HTML이 구조를, CSS가 디자인을, JavaScript가 동작을 주로 담당합니다. 코덱스 같은 AI 개발 도구는 코드를 읽고 수정하는 일을 도울 수 있지만, 코드를 만들었다는 것과 테스트·배포까지 끝났다는 것은 다릅니다. 처음부터 어려운 명령어를 외울 필요는 없습니다. 홈페이지를 고칠 일이 생기면 먼저 다음 세 가지를 생각해 보세요. 무엇을 바꾸고 싶은가? 무엇은 그대로 유지해야 하는가? 결과가 제대로 작동하는지 어떻게 확인할 것인가? 이 세 가지를 구체적으로 설명하는 것만으로도 AI를 활용한 코딩의 첫 단계를 시작할 수 있습니다.

이 블로그 검색