프로젝트에서 보기 →

코딩 입문자를 위한 시작할때 무조건 알아야할 상식 [코딩기초 1부]

태그
교육
시작일
종료일
수정일

https://www.youtube.com/watch?v=RCk_Hirbq5Q

# 1. 이건 꼭 알아야 한다[^1]

[? 질문] 코딩을 처음 시작하는 사람이 **가장 빠르고 성공적으로** 기술을 습득하는 방법은 무엇인가[^6]  
[= 답] “가짜를 하지 말고 진짜를 하자”는 원칙, 즉 **진짜로 만들고 싶은 것을 실제로 만드는 목표 지향 학습**이 가장 빠른 길이며, 목적 없이 용어·개념을 완벽히 이해하려고 하면 오히려 돌아가게 된다.[^6][^9]

[? 질문] 코딩 초보가 낯선 용어와 개념을 만나면 어떻게 대응해야 하는가[^17]  
[= 답] 코딩을 잘하는 목표 하나만 붙잡고, 모르는 용어는 **집요하게 파고들지 말고 일단 패스**하며 필요해질 때 검색(구글링)으로 해결하는 방식이 포기 확률을 낮춘다.[^17][^19][^23]

[? 질문] 코딩/프로그래밍, 웹/앱/웹앱, 컴파일/소스/결과물 같은 기본 개념은 무엇을 의미하는가[^26]  
[= 답] 코딩은 **코드로 된 문서를 작성하는 행위**, 프로그래밍은 코딩을 포함해 프로그램 완성에 필요한 모든 행위(실무에서는 혼용)이며, 웹·앱·웹앱은 접근/설치 방식과 사용 목적성(앱의 목적성, 웹의 탐색성)으로 구분하고, 컴파일은 사람이 쓰는 코드를 컴퓨터가 이해 가능한 형태로 번역해 실행 파일(예: exe) 같은 결과물을 만든다.[^26][^28][^33][^40]

---

# 2. 큰 그림[^2]

이 콘텐츠는 코딩 입문자가 시작 단계에서 가장 많이 막히는 지점(목표 부재, 용어 공포, 완벽주의) 때문에 포기하는 문제를 줄이기 위해, **학습 태도(목표 지향/대충 시작)**와 **필수 기초 개념(코딩/프로그래밍/웹·앱/컴파일 등)**을 실제 사례와 비유로 풀어 설명한다.[^6][^15][^26] 또한 “무엇부터 공부할지”의 방향으로 **HTML/CSS/JavaScript 및 프론트엔드/백엔드** 개념을 연결해, 입문자가 다음 행동을 정할 수 있게 안내한다.[^45][^47]

- **목표 지향 학습**이 가장 강력한 가속 장치다: 진짜 만들고 싶은 것을 만들면 허들(장벽)을 빠르게 넘게 되지만, 목적지가 없으면 허들만 보이며 지쳐서 레이스를 멈춘다.[^9][^14][^15]  
- **완벽주의를 버리고 “모르면 패스”**가 출발점이다: 용어를 하나하나 완벽히 알려는 시도는 끝이 없고, 필요할 때 검색하면 되며, 실무 개발은 학문과 성격이 다르다.[^19][^21][^24]  
- 코딩의 실체는 **코드 문서 작성 → (컴파일) → 결과물 생성**이며, 웹/앱/웹앱과 프론트엔드/백엔드를 구분해 보면 앞으로 무엇을 만들고 무엇을 배울지 구조가 잡힌다.[^26][^40][^47]

---

# 3. 하나씩 살펴보기[^1]

## 3.1 화자 소개와 “이 영상은 입문자가 반드시 봐야 한다”는 전제[^2][^3]

![📸 0:01](https://fileupload.godd.app/api/files/8e46db22-61d4-403e-8a27-3efe793426f0/download)


화자는 인사 후, 자신이 코딩을 가르치거나 조언할 자격이 무엇인지 경력으로 제시한다.[^2] 2000년대 초부터 **프리랜서로 다양한 웹사이트 개발**을 해왔고, **광고 플랫폼 스타트업에서 50만 사용자 앱의 책임 개발**을 맡았다고 말한다.[^3] 또한 **여행 플래닝 스타트업을 공동 창업**하여 **CTO로 7년** 재직했고, **한화·SK 등 대기업 투자 유치**, 그리고 **한국관광공사 선정 2015 창조관광 기업 선정** 경험을 언급한다.[^4] 현재는 이러한 경험을 바탕으로 **디지털 에이전시를 운영하는 개발자**라고 정리하며, 코딩 관심자/입문자라면 반드시 봐야 할 영상이라고 말한다.[^5][^6]

이 도입은 뒤에서 제시할 학습법(목표 지향, 실무 중심, 완벽주의 배제)이 단순 이론이 아니라 실무·창업 경험에서 나온 것임을 강조하는 역할을 한다.[^4][^6]

---

## 3.2 코딩을 배우는 목적은 다양하지만 “가장 빠른 습득법”은 동일하다[^7][^8]

![📸 0:41](https://fileupload.godd.app/api/files/01c1d359-f1b4-444f-b456-a1e6f800f5ff/download)


화자는 코딩의 목적이 **취업**, **사업**, **취미**, **부업** 등 무엇이든 될 수 있다고 열거한다.[^7] 그리고 목적이 무엇이든 “가장 빠르고 아주 간단하게 기술을 성공적으로 습득할 수 있는 방법”이 있다고 전제한다.[^8] 그 방법의 “가장 중추적인 개념”으로 다음 문장을 제시한다.[^8]

- [h 가짜를 하지 말고 진짜를 하자][^8]

여기서 ‘가짜’는 코딩을 배우는 과정이 실제로 만들고자 하는 목적과 분리된 채, 형식적·비본질적 요소(용어 암기, 완벽한 이해, 목적 없는 문제풀이 등)에 갇히는 상태를 가리키는 맥락으로 사용된다.[^8][^14] 반대로 ‘진짜’는 코딩의 순(純) 목적—즉 **무언가를 실제로 만드는 것**—을 그대로 수행하는 것을 의미한다고 말한다.[^9]

화자는 “코딩의 순 목적을 그대로 행하면 빠르게 할 수 있고”, 그렇지 않으면 “굉장히 돌아서 가게 된다”고 대비시킨다.[^9][^10] 즉 같은 시간을 써도 ‘학습의 방향’에 따라 속도와 성과가 갈린다는 주장이다.[^9][^10]

---

## 3.3 영어 학습 비유로 설명하는 목표 지향 학습의 강제력[^11][^12][^13]

![📸 1:13](https://fileupload.godd.app/api/files/0bdd9079-38a4-4cd8-bee4-dacc0a821d6a/download)


화자는 학습 가속의 원리를 영어 예시로 비유한다.[^11]

- 영어를 배울 때, 매일 영어로만 대화해야 하는 환경에 처하면 그보다 더 빠르게 영어가 늘 수 없다고 말한다.[^11]
- 그 이유는 “진짜 영어를 목적으로 해야 하는 상황”이기 때문이라고 설명한다.[^12]

이 비유의 논리는 “환경/상황이 목표를 강제하면 학습은 빨라진다”이다.[^11][^12] 이를 그대로 코딩 학습에 적용해, 코딩도 “진짜 만들고 싶은 걸 만든다면 빠르게 갈 수밖에 없다”고 연결한다.[^13]

---

## 3.4 목적이 있으면 허들을 넘고, 목적이 없으면 허들만 보인다[^14][^15][^16]

![📸 1:28](https://fileupload.godd.app/api/files/43c5ffd6-9dc9-4605-b2c1-b7e6fcbe3700/download)


화자는 ‘진짜로 만들고 싶은 것’을 목표로 두면 왜 빨라지는지를 다음처럼 설명한다.[^14]

- 목표가 있으면 **목표 지향적**이 되기 때문에, 학습 중간중간 등장하는 **허들(장벽)**을 “무시하거나 빠르게 넘어갈 수 있다”고 말한다.[^14]

반대로 목적지가 없고 결승점이 어딘지도 모르면 어떤 일이 생기는지, 학습자의 시야가 ‘허들’로 축소되는 과정을 묘사한다.[^15]

- 목적지가 없으면 눈앞의 허들밖에 안 보이게 된다.[^15]
- 허들이 반복되면서 지치게 된다.[^15]
- 사실 별것 아닌 내용도 어렵게 느껴진다.[^15]
- 그 결과 코딩이라는 레이스를 멈추게 될 가능성이 매우 높다고 말한다.[^15]

그리고 실제로 중간에 포기하는 사람이 정말 많다고 현실 진단을 덧붙인다.[^16]

> [!IMPORTANT] 포기의 메커니즘(화자 설명)
> 목표 부재 → 허들만 인지 → 반복 허들로 피로 누적 → 난이도 체감 상승 → 레이스 중단(포기).[^15][^16]

---

## 3.5 포기를 줄이려면 “스타트(출발 방식)”가 중요하다[^17][^18][^19]

![📸 1:55](https://fileupload.godd.app/api/files/22bc5ca4-8301-4836-8ab2-02e3d34361a6/download)


화자는 “이렇게 되지 않으려면 스타트가 중요”하다고 말하며, 시작 단계에서 학습 프레임을 바꾸겠다고 예고한다.[^17] 먼저 “말한 것처럼 목표가 있으면 좋겠고”, 만약 지금 뚜렷한 목표가 없더라도 “목표 지향적으로 목표가 있는 것 마냥 우리가 학습하면 된다”고 제안한다.[^18] 즉 당장 사업 아이디어나 만들 제품이 없어도, 학습 방식을 ‘목표가 있는 사람처럼’ 설계하라는 뜻이다.[^18]

또한 자신이 목표 지향적 학습을 경험했기 때문에 이 영상을 찍을 수 있다고 말하며, 시청자를 “포기의 가능성이 가장 낮은 길”로 안내하겠다고 선언한다.[^19][^20]

---

## 3.6 입문자가 용어에 막힐 때의 원칙: “모르면 패스, 목표만 기억”[^21][^22][^23]

![📸 2:18](https://fileupload.godd.app/api/files/35910707-4213-4da4-ad97-db80ca20d503/download)


본격적인 실전 조언으로, 화자는 코딩을 배우려 하면 “알 수 없는 용어들이” 계속 나온다고 말한다.[^21] 이때 코딩을 잘하려면(=학습을 지속하려면) 모르는 용어는 “그냥 패스”라고 단정한다.[^22]

핵심은 학습 목표를 지나치게 분산시키지 않는 것이다.[^23]

- 우리는 “코딩을 잘 하고자 하는 목표 딱 하나만 기억하면 된다”고 말한다.[^23]
- “용어 하나하나마다 집요하게 알 필요가 전혀 없다”고 강조한다.[^23]

그리고 용어를 집요하게 파기 시작하면 오히려 “아예 잘할 수가 없다”고까지 말한다.[^24] 그 이유로 “완벽하게 아는 순간은 결코 오지 않기 때문”이라고 설명한다.[^25]

여기서 화자가 말하는 ‘완벽주의의 함정’은, 코딩이라는 분야의 지식이 넓고 지속적으로 변하며(뒤에서 트렌드 언급), 모든 용어를 완벽히 이해한 뒤에야 코딩을 시작하려는 태도는 시작 자체를 불가능하게 만든다는 논리로 이어진다.[^25][^33]

---

## 3.7 한글 문법(격조사/보조사) 비유로 “몰라도 된다”를 설득[^26][^27][^28]

![📸 2:39](https://fileupload.godd.app/api/files/3624f624-70b9-475d-977d-c797a2cd8137/download)


화자는 “완벽히 알아야 한다”는 강박이 불필요함을 **한글 비유**로 설득한다.[^26]

- 우리는 한글을 매우 자유자재로 구사하지만, “한글의 격조사와 보조사의 차이를 설명해보라”고 하면 설명할 수 있는 사람이 얼마나 되겠냐고 묻는다.[^26][^27]
- 이런 건 “국어를 학문으로 하고 있는 사람만 알 것 같은 내용”이라고 말한다.[^27]
- 그리고 결정적으로, 격조사/보조사를 모르는 것이 우리가 의사 표현하는 데 영향이 있냐고 물은 뒤 “전혀 없다”고 결론낸다.[^28]

즉 “잘 사용(실행)하는 것”과 “학문적으로 설명할 수 있는 것”은 다르며, 실용의 관점에서는 많은 것을 몰라도 된다는 메시지다.[^26][^28]

또한 “혹시 알고 싶으면 그때 검색하면 되는 것”이라고 말해, 지식을 ‘사전 완비’가 아니라 ‘필요 시 조달’하는 방식으로 바꾸라고 권한다.[^29]

---

## 3.8 “코딩 잘하려면 구글링”과 실무 vs 학문 비교[^30][^31][^32][^33]

![📸 3:06](https://fileupload.godd.app/api/files/b2052b37-178b-40b5-9cc3-87483dd045eb/download)


화자는 흔히 듣는 문장—“코딩 잘 하려면 구글링을 잘하면 된다”—를 가져와 자신의 원칙과 연결한다.[^30] 핵심은 모르면 “그때 검색하면 되는 것”이라는 태도다.[^31]

이어 흥미로운 비교를 제시한다.[^32]

- “일반적인 컴공 교수님”과 “실무 개발자” 중 누가 더 코딩을 잘하냐고 비교하면, 화자는 감히 “실무에서 하고 있는 사람이 훨씬 더 잘한다”고 말한다.[^32]
- 이유로 실무자는 “최근 트렌드도 더 잘 알고” 있기 때문이라고 덧붙인다.[^33]
- 결론적으로 “학문과 실제 목적이 있는 개발은 아예 다른 차원”이라고 말한다.[^33]

이 구분은 입문자가 코딩을 ‘학문적 완전성’으로 접근하다가 길을 잃지 말고, “목적이 있는 개발(만들기)”의 관점으로 접근하라는 메시지를 강화한다.[^33][^14]

---

## 3.9 초반엔 “대충 해라”와 “완벽한 순간은 오지 않는다”[^34][^35]

![📸 3:36](https://fileupload.godd.app/api/files/3073b664-0a6c-4ab1-9cce-a6770835ac56/download)


위 논의를 행동 지침으로 압축해, 화자는 다음을 강조한다.[^34][^35]

- 모르는 게 나타나도 “그냥 무시하고 다음으로 넘어가라”고 말한다.[^34]
- “이번 생에서 코딩으로 뭔가 만들고 싶다면 처음에는 대충 해라”가 “매우 중요”하다고 강조한다.[^35]
- “완벽한 순간은 절대 오지 않는다”고 다시 못 박는다.[^35]

즉 입문 단계의 최우선 과제는 ‘정확한 이해’보다 ‘전진(진행)과 완성 경험’이며, 이 태도가 지속을 만든다는 전제를 깔고 있다.[^35][^15]

> [!TIP] 입문자의 진행 규칙(화자 프레이밍)
> 모르는 용어/개념은 일단 패스하고, “만들기”를 진행하면서 필요해질 때 검색으로 메운다.[^22][^31][^35]

---

## 3.10 “코딩이란 무엇인가”: 코드 문서를 작성하는 행위[^36][^37][^38][^39]

![📸 3:43](https://fileupload.godd.app/api/files/104eb49b-4d6e-4854-ab61-51bcdfcfddc8/download)


태도 조언 다음, 화자는 정의를 통해 기초 개념을 정리한다.[^36]

- “코딩을 짜는 것이 코딩”이라고 말하며, ‘코딩’의 가장 직접적 의미를 제시한다.[^36]
- “코드를 짠다”는 것은 “코드로 된 문서를 만든다”는 의미라고 풀어준다.[^37]
- 여기서 “코드”란 우리가 사용하는 앱/웹 등 “모든 소프트웨어를 개발할 때 사용하는 언어”를 말한다고 정의한다.[^38]

이 정의를 다시 대화 형태로 확인한다.[^39]

- “코딩이란 소프트웨어를 개발할 때 사용하는 언어로 문서를 만드는 거구나”라고 정리하면 “맞다”고 답한다.[^39]

즉, 코딩을 신비화하지 말고 **문서 작성(텍스트 작성)**으로 이해하라는 프레임이다.[^37][^39]

---

## 3.11 “프로그래밍이란 무엇인가” 및 코딩과의 차이(실무에선 혼용) 정리[^40][^41][^42]

![📸 4:11](https://fileupload.godd.app/api/files/f137dc47-6b9d-412a-9312-49ba7625d1da/download)


이어서 “프로그래밍은 뭘까요”라고 질문을 던지고, “프로그램을 개발하는 것이 프로그래밍”이라고 정의한다.[^40] 다음으로 입문자가 흔히 묻는 질문을 직접 제기한다.[^41]

[? 질문] 코딩과 프로그래밍 차이는 뭔가요[^41]  
[= 답] 코딩은 코드 작성 행위 자체, 프로그래밍은 코딩을 포함해 프로그램 완성에 필요한 모든 행위의 개념이지만, 현실에서는 혼용하므로 “그냥 같다고 생각해도 무방”하다.[^42][^43]

화자는 사람들이 혼용해서 사용하기 때문이라고 이유를 붙이고, “코딩이 프로그램을 개발하는 거구나”라는 정리에 다시 “맞다”고 응답하며 정의 파트를 마무리한다.[^43][^44]

---

## 3.12 웹/앱/웹앱의 구분: 접근 방식과 ‘목적성’의 차이[^45][^46][^47][^48][^49][^50]

![📸 4:39](https://fileupload.godd.app/api/files/45887d0b-4cac-482d-96be-34da7668a58f/download)


화자는 다음 단계로 “웹은 뭐고 앱은 뭐고 웹앱은 뭘까요”라고 문제를 제기한다.[^45]

### 3.12.1 웹과 모바일 웹
- PC에서 `naver.com` 같은 주소를 입력해 들어가는 것이 “웹”이라고 설명한다.[^46]
- 같은 네이버닷컴이라도 스마트폰에서 보면 스마트폰에 맞게 보이는데, 그것이 “모바일 웹”이라고 말한다.[^47]

즉 웹은 브라우저 기반 접근이며, 화면은 기기에 맞춰 달라질 수 있다는 점을 짚는다.[^46][^47]

### 3.12.2 앱
- 안드로이드는 구글 플레이, 아이폰은 앱스토어에서 “네이버”를 검색해 설치하는 것이 “앱”이라고 정의한다.[^48]

즉 앱은 스토어를 통해 설치되는 프로그램이라는 접근 방식으로 구분한다.[^48]

### 3.12.3 웹앱: “웹을 앱처럼”
- “웹을 앱처럼 만들어 놓은 것”이 웹앱이라고 말한다.[^49]
- 화자는 앱 화면을 떠올리면 웹보다 **단순**, **유틸리티/도구적**, **기능적** 이미지가 강하다고 묘사한다.[^50]
- 그래서 “웹 서핑”이라는 말은 있지만 “앱 서핑”이라는 말은 없다고 예시를 들며, 앱은 그만큼 “목적이 뚜렷한 프로그램”이라고 결론낸다.[^50][^51]
- 그리고 웹을 그런 목적 지향적 형태로 만들면 웹앱이라고 정리한다.[^51]

마지막으로 사례를 든다.[^52]

- 네이버 번역기 **파파고**는 웹으로 접속하든 앱으로 실행하든 화면과 기능이 비슷하다.[^52]
- 이때 파파고의 ‘웹’을 웹앱으로 볼 수 있다고 말한다.[^52]

이 파트는 입문자가 웹/앱을 단순히 “PC vs 모바일”로만 이해하지 않고, **사용 맥락(탐색 vs 목적 수행)**까지 포함해 이해하도록 돕는다.[^50][^51]

---

## 3.13 “이제 더 본론”: 코드 문서를 어떻게 컴퓨터가 실행하는가(0과 1, 컴파일, exe) 이해[^53][^54][^55][^56][^57][^58][^59]

![📸 5:47](https://fileupload.godd.app/api/files/05542553-9df3-425f-8c22-1db1ae57609e/download)


화자는 “웹과 앱과 웹앱을 정리”했다며, 이제 더 본론으로 가서 “코딩을 처음 시작”해보자고 말한다.[^53] 앞서 정의했던 문장을 다시 가져온다: 코딩이란 “코드로 된 문서를 작성하는 것”이다.[^54]

여기서 ‘문서를 작성하면 실제로 어떻게 실행되느냐’로 설명이 이어진다.[^55]

### 3.13.1 컴퓨터는 0과 1만 사용한다
- 우리는 한글을 쓰고 미국인들은 영어를 쓰듯, 컴퓨터(하드웨어)는 사실 **0과 1 두 가지 숫자만** 사용한다고 말한다.[^55][^56]
- 인간 입장에서 컴퓨터가 알아듣게 대화하려면 `0100011...` 같은 형태로 알려주면 컴퓨터는 화면에 “안녕하세요”라는 메시지를 찍게 된다고 예시한다.[^57]

### 3.13.2 사람이 하기엔 너무 원초적이다 → 사람 친화적 언어의 등장
- “안녕하세요 투더제이입니다” 같은 더 긴 문장을 출력하려면 0과 1의 나열이 매우 길어지며, 이는 “사람이 할 짓이 못 된다”고 말한다.[^58]
- 그럼에도 과거에는 이런 방식으로 코딩을 하기도 했지만, 인간에게 너무 원초적인 언어라고 평가한다.[^59]
- 그래서 C언어를 비롯해 인간이 쓰기 편한 언어들이 나오게 되었다고 설명한다.[^60]

### 3.13.3 컴파일: 사람이 쓴 코드를 PC가 알아보게 번역
- 이런 언어들은 “컴파일”이라는 과정을 거친다고 말한다.[^61]
- 컴파일을 “인간이 알아먹을 수 있는 코드 문서를 PC가 알아볼 수 있도록 번역하는 과정”으로 정의한다.[^62]

### 3.13.4 exe 예시로 “소스 → 컴파일 → 결과물” 구조를 설명
- 윈도우 실행 파일 확장자 `exe`를 예로 들며, 개발자가 exe 파일을 직접 만드는 게 아니라 “코드로 된 문서를 만들어 놓고 컴파일”하면 문서가 번역되고 결과물로 exe 파일이 나온다고 설명한다.[^63][^64]
- 이때 “코드로 된 문서”는 **소스(source)**이고, exe는 **결과물**이라고 구분한다.[^65]
- 결과물만 사용자에게 배포/판매되므로 사용자는 소스를 볼 수 없고, 그래서 따라 만들 수도 없다고 말한다.[^66]
- 반대로 소스가 배포되면 누구든지 비슷한 결과물을 만들 수 있게 된다고 덧붙인다.[^67]

즉 “코딩은 문서 작성”이라는 정의를 실제 배포 구조(소스 비공개/공개, 결과물 배포)까지 연결해, 왜 소스가 보이지 않는지/오픈소스가 왜 강력한지 같은 직관을 제공한다.[^65][^66][^67]

---

## 3.14 “무엇을 만들고 싶은가”에 따라 첫 언어/영역을 잡기: HTML/CSS/JavaScript 제안[^68][^69]

![📸 7:40](https://fileupload.godd.app/api/files/07651522-3674-4a4c-8338-b30db2f0201c/download)


화자는 질문을 던진다: “여러분들은 어떤 것을 만들고 싶으신가요?”[^68] 그리고 만들고 싶은 대상의 범위를 넓게 열거한다.[^69]

- PC, 스마트폰, 태블릿 등에서 동작하는 웹/앱
- 키오스크, 냉장고, TV, 자동차 등 “어떤 기기든”
- 공통 조건: “인터페이스가 있는 소프트웨어”

이런 종류의 소프트웨어를 만들고 싶다면 **HTML, CSS, JavaScript를 가장 먼저** 하면 된다고 말한다.[^69] 그리고 이 영역을 일반적으로 **프론트(프론트엔드) 개발**이라고 부른다고 연결한다.[^70]

이 조언은 입문자가 “무엇부터 해야 하나”에서 가장 흔히 듣는 ‘웹 기초 3종’으로 방향을 정리해주는 역할을 한다.[^69][^70]

---

## 3.15 개발의 두 축: 프론트엔드 vs 백엔드, 그리고 UI/UX 예시(유튜브 레이아웃)로 프론트의 의미 설명[^71][^72][^73][^74][^75][^76][^77][^78]

![📸 7:55](https://fileupload.godd.app/api/files/5068a993-80a6-4f22-8643-fe21a98803a1/download)


화자는 개발에는 **프론트엔드와 백엔드가 있다**고 큰 분류를 제시한다.[^71]

- 프론트엔드는 사용자의 눈에 보이는 화면: 앱 화면, 웹 화면이라고 말한다.[^72]
- 백엔드는 “눈에 안 보이는 것”이라고 표현한다.[^73]

프론트엔드가 무엇인지 직관적으로 이해시키기 위해 유튜브 사례를 든다.[^74]

- 유튜브의 “내용은 항상 달라지지만”, 화면의 “틀/레이아웃은 항상 그대로”라고 말한다.[^74]
- 왼쪽 상단에 유튜브 로고가 있고, 그것을 누르면 홈으로 간다는 것을 우리는 알고 있다고 예시한다.[^75]
- 돋보기 아이콘을 누르면 검색이라는 것도 알고 있다고 덧붙인다.[^76]
- 그 외에도 버튼이 어디 있는지 우리는 잘 알고 있다고 말한다.[^77]

그리고 중요한 포인트를 짚는다.[^78]

- 이런 것은 “누가 알려주지 않았”는데도 우리가 아는 이유가 있는데, 그것이 **UI/UX(유저 인터페이스/유저 익스피리언스)** 때문이라고 말한다.[^78]
- 사용자들의 기존 경험이 자연스럽게 “이 버튼은 이런 행동을 하겠구나”로 학습되고 인지된 것이라고 설명한다.[^78]
- 마치 “암묵적인 약속”처럼 왼쪽 위에는 로고가 있고 오른쪽 위에는 로그인된 사용…(이후 내용은 제공된 transcript가 중간에서 끊긴 상태)라고 이어간다.[^78][^79]

즉 프론트엔드는 단지 화면을 ‘예쁘게’ 만드는 것이 아니라, 사용자가 학습해온 패턴과 약속(UI/UX)에 맞게 배치·동작을 설계하는 영역이라는 함의를 제공한다.[^78]

+++ 상세 예시(원문이 제공한 수준에서의 UI/UX 포인트)
- 유튜브 로고(좌상단) → 홈으로 이동이라는 관습적 동작을 사용자가 이미 학습함.[^75]  
- 돋보기(검색 아이콘) → 검색이라는 의미를 아이콘 관습으로 학습함.[^76]  
- “누가 알려주지 않았는데도 안다”는 점을 통해 UI/UX가 사용자의 기존 경험과 연결된다는 설명으로 확장.[^78]
+++

> [!NOTE] 제공된 원문 범위의 한계
> transcript가 @[08:52] 이후 문장이 중간에서 끊겨 있어(“오른쪽 위에는 로그인된 사용…”) UI/UX 설명이 이후 어떻게 마무리되는지는 본 보고서에 포함할 수 없다.[^79] (추가 원문을 주면 해당 구간부터 동일 원칙으로 이어서 상세 보고 가능)

---

# 4. 핵심 통찰[^6]

1. [c 코딩 입문에서 가장 중요한 것은 ‘완벽한 이해’가 아니라 ‘진짜 목적을 가진 만들기’다.] 코딩을 배우는 목적이 무엇이든, 실제로 만들고 싶은 것을 만들 때 학습 속도가 강제적으로 빨라진다는 논리로 전개된다.[^8][^13][^14]  
   - 실행: 지금 당장 만들 결과물(작은 기능이라도)을 정하고, 그 기능을 구현하는 데 필요한 것만 찾아서 진행한다.[^18][^31]

2. [h 목표가 없으면 허들만 보이고, 허들이 반복되면 포기한다.] 목적지가 없을 때 학습이 ‘문제들의 연속’으로만 인지되어 체감 난이도가 상승하고 중도 이탈로 이어진다는 메커니즘을 제시한다.[^15][^16]  
   - 실행: 목표가 없더라도 ‘목표가 있는 것처럼’ 학습 구조를 만들라고 권한다.[^18]

3. [h “모르면 패스”는 무책임이 아니라 지속을 위한 전략이다.] 용어를 집요하게 파면 끝이 없고 완벽한 순간이 오지 않으므로, 필요한 순간에 검색해서 해결하는 방식이 실무적이며 효율적이라는 관점을 준다.[^23][^25][^31]  
   - 실행: 모르는 용어는 메모만 해두고 진행, 막히는 지점에서만 검색/질문으로 해결한다.[^22][^29][^31]

4. [m 코딩을 ‘코드 문서 작성’으로 이해하면 진입 장벽이 낮아진다.] 코딩을 신비화하지 않고 문서 작성 행위로 정의함으로써, “일단 써보고 돌려보기”로 접근하게 만든다.[^37][^39]

5. [m 소스-컴파일-결과물 구조를 이해하면 배포와 오픈소스의 의미가 보인다.] exe 같은 결과물은 소스를 컴파일한 산출물이며, 결과물만 배포되면 사용자가 소스를 볼 수 없고 소스가 공개되면 누구나 비슷한 결과물을 만들 수 있다는 설명이 따라온다.[^64][^66][^67]

6. [m 웹/앱/웹앱은 단순히 기기 차이가 아니라 사용 경험과 목적성의 차이다.] 웹 서핑 vs 앱 서핑의 대비로, 앱이 목적 지향적이라는 직관을 제공하고 웹을 앱처럼 만들면 웹앱이라는 구분을 준다.[^50][^51]

---

# 5. 헷갈리는 용어 정리[^26]

- **코딩(Coding)**: **코드로 된 문서를 작성하는 행위**(코드를 짜는 것).[^36][^37]  
- **코드(Code)**: 앱/웹 등 소프트웨어를 만들 때 사용하는 **언어**(언어로 쓰인 문서).[^38]  
- **프로그래밍(Programming)**: 프로그램을 개발하는 모든 행위(코딩 포함)로 설명되며, 실무에서는 코딩과 혼용해도 무방하다고 말한다.[^40][^42][^43]  
- **웹(Web)**: PC에서 주소(URL)를 입력해 접속하는 형태로 설명(브라우저 기반).[^46]  
- **모바일 웹(Mobile Web)**: 같은 웹사이트라도 스마트폰에서 기기에 맞게 보이는 웹 형태.[^47]  
- **앱(App)**: 구글 플레이/앱스토어에서 검색해 **설치**해서 쓰는 프로그램.[^48]  
- **웹앱(Web App)**: 웹을 앱처럼(더 단순·도구적·기능적·목적 지향적으로) 만든 것; 파파고 웹을 예로 든다.[^49][^50][^52]  
- **컴파일(Compile)**: 사람이 읽을 수 있는 코드 문서를 PC가 알아볼 수 있도록 **번역**하는 과정.[^62]  
- **소스(Source)**: 코드로 된 문서(컴파일 전의 원본 문서).[^65]  
- **결과물(Executable/Artifact)**: 컴파일 결과로 생성된 실행 파일 등 산출물(예: exe).[^64][^65]  
- **프론트엔드(Front-end)**: 사용자 눈에 보이는 화면(웹/앱 화면) 영역.[^72]  
- **백엔드(Back-end)**: 사용자 눈에 보이지 않는 영역.[^73]  
- **UI/UX**: 사용자 경험을 통해 버튼의 의미/동작을 자연스럽게 인지하게 하는 인터페이스/경험(유튜브 로고·검색 아이콘 예시).[^78]

---

---

## 참고(콘텐츠 정보)[^1]

- 제목: 코딩 입문자를 위한 시작할때 무조건 알아야할 상식 [코딩기초 1부][^1]  
- 채널: 코딩 수익화 : 투더제이 TTJ[^1]  
- 길이: 10분 0초[^1]  
- 링크: https://www.youtube.com/watch?v=RCk_Hirbq5Q[^1]  

---

[^1]: “# 코딩 입문자를 위한 시작할때 무조건 알아야할 상식 [코딩기초 1부] … https://www.youtube.com/watch?v=RCk_Hirbq5Q”
[^2]: @[00:01] “안녕하세요”
[^3]: @[00:10] “저는 2000년 초부터 프리랜서로 다양한 웹사이트 개발을 했었고 광고 플랫폼 스타트업에서 50만 사용자 앱을 책임 개발하였습니다”
[^4]: @[00:18] “또 여행 플래닝 스타트업을 공동 창업하고 cto로 7년간 역임하며 한화 SK 등 대기업으로부터 투자 유치를 하였고 한국관광공사 선정 2015 창조관광 기업으로 선정된 경험…”
[^5]: @[00:28] “현재는 이런 경험을 바탕으로 디지털 에이전시를 운영하고 있는 개발자입니다”
[^6]: @[00:33] “코딩의 관심이 있으시거나 이제 시작하시려는 분들께서는 반드시 보셔야 할 영상…”
[^7]: @[00:41] “코딩이란 취업… 사업… 취미… 부업…”
[^8]: @[00:52] “가장 빠르고 아주 간단하게 기술을 성공적으로 습득… 가장 중추적인 개념은 가짜를 하지 말고 진짜를 하자는 것입니다”
[^9]: @[01:04] “코딩의 순 목적을 그대로 행하면 빠르게…”
[^10]: @[01:09] “그렇지 않으면 굉장히 돌아서 가게 됩니다”
[^11]: @[01:13] “영어를 배울 때 영어로만 매일 대화해야만 하는 환경…”
[^12]: @[01:19] “진짜 영어를 목적으로 해야 하는 상황…”
[^13]: @[01:23] “코딩도 여러분들이 진짜 만들고 싶은 걸 만든다면 빠르게 갈 수밖에 없습니다”
[^14]: @[01:28] “목표 지향적… 허들들을 무시하거나 빠르게 넘어갈 수…”
[^15]: @[01:39] “목적지가 없고… 허들 밖에 보이지 않게 되고… 지치게 되고… 어렵게 느껴져서… 멈추게…”
[^16]: @[01:51] “실제로 중간에 포기하는 분들이 정말 많아요”
[^17]: @[01:55] “이렇게 되지 않으려면 스타트가 중요…”
[^18]: @[01:58] “목표가 있으면 좋겠고… 없더라도 목표 지향적으로…”
[^19]: @[02:06] “목표 지향적인 학습을 제가 경험했기 때문에…”
[^20]: @[02:12] “포기의 가능성이 가장 낮은 길로 안내…”
[^21]: @[02:18] “코딩을 배우려고 하면 알 수 없는 용어들이…”
[^22]: @[02:20] “코딩을 잘 하려면 모르면 그냥 패스입니다”
[^23]: @[02:25] “코딩을 잘 하고자 하는 목표 딱 하나… 용어 하나하나마다 집요하게 알 필요…”
[^24]: @[02:35] “그렇게 하면 아예 잘할 수가 없어요”
[^25]: @[02:36] “완벽하게 아는 순간은 결코 오지 않기 때문…”
[^26]: @[02:39] “우리는 한글을 매우 자유자재로…”
[^27]: @[02:44] “격조사와 보조사의 차이를 설명…”
[^28]: @[02:56] “격조사와 보조사가… 영향 있나요 전혀 없습니다”
[^29]: @[03:03] “몰라도 무관하며… 그때 그냥 검색…”
[^30]: @[03:06] “코딩 잘 하려면 구글링을 잘하면…”
[^31]: @[03:12] “모르면 그때 검색을 하면 되는 거예요”
[^32]: @[03:14] “컴공 교수님과 실무… 누가 더 코딩… 실무… 훨씬 더…”
[^33]: @[03:28] “최근 트렌드… 학문과 실제 목적이 있는 개발은 아예 다른 차원…”
[^34]: @[03:36] “모르는게 나타나도 그냥 무시하고 다음으로 넘어가세요”
[^35]: @[03:40] “처음에는 대충 해라… 완벽한 순간은 절대 오지 않는다”
[^36]: @[03:43] “자 그럼 코딩이란 뭘까요”
[^37]: @[03:47] “코딩을 짜는 것이 코딩입니다”
[^38]: @[03:51] “코드를 짠다는 것은 코드로 된 문서를 만든다는…”
[^39]: @[03:57] “코드란… 소프트웨어를 개발할 때 사용하는 언어…”
[^40]: @[04:11] “프로그래밍은 뭘까요…”
[^41]: @[04:14] “그럼 코딩과 프로그래밍 차이는 뭔가요”
[^42]: @[04:18] “코딩은… 프로그래밍은… 하지만 그냥 같다고 생각하셔도…”
[^43]: @[04:32] “혼용해서 사용…”
[^44]: @[04:34] “코딩이 프로그램을 개발하는 거구나… 맞아요”
[^45]: @[04:39] “그럼 웹은 뭐고 앱은 뭐고 웹앱은 뭘까요”
[^46]: @[04:45] “pc에서 네이버.com… 들어가는게 웹…”
[^47]: @[04:49] “스마트폰에서 보면… 모바일 웹…”
[^48]: @[05:01] “안드로이드… 구글 플레이… 앱스토어… 설치하는게 앱…”
[^49]: @[05:09] “웹앱은… 웹을 앱처럼 만들어 놓은 것…”
[^50]: @[05:14] “앱 화면… 웹보다 단순… 유틸리티… 도구적… 기능적…”
[^51]: @[05:21] “웹 서핑… 앱 서핑… 앱은 목적이 뚜렷… 웹을 그렇게 만들면 웹앱…”
[^52]: @[05:33] “파파고… 웹… 앱… 비슷… 파파고의 웹을 웹앱…”
[^53]: @[05:47] “웹과 앱과 웹을 정리…”
[^54]: @[05:54] “코딩이란 코드로 된 문서를 작성…”
[^55]: @[06:01] “우리는 한글… 미국인들은 영어…”
[^56]: @[06:04] “컴퓨터는 사실 0과 1…”
[^57]: @[06:10] “0100011… 컴퓨터는… 안녕하세요…”
[^58]: @[06:17] “안녕하세요 투더제이입니다… 0100… 사람이 할 짓이…”
[^59]: @[06:39] “과거에는 이 방법으로 코딩…”
[^60]: @[06:47] “그래서 c언어를 비롯한…”
[^61]: @[06:53] “이런 언어들은 컴파일…”
[^62]: @[07:00] “컴파일이란… 번역… 과정…”
[^63]: @[07:07] “윈도우… exe…”
[^64]: @[07:14] “코드로 된 문서를… 컴파일… 결과물로 exe…”
[^65]: @[07:21] “코드로 된 문서는 소스… exe는 결과물…”
[^66]: @[07:26] “결과물만… 사용자는 소스를 볼 수가…”
[^67]: @[07:34] “반대로 소스가 배포된다면…”
[^68]: @[07:40] “여러분들은 어떤 것을 만들고 싶으신가요”
[^69]: @[07:44] “PC… 스마트폰… 키오스크… 냉장고… TV… 자동차… 인터페이스… html… css… 자바스크립트…”
[^70]: @[07:49] “일반적으로 프론트… 개발…”
[^71]: @[07:55] “개발에는 프론트엔드와 백엔드…”
[^72]: @[08:01] “프론트엔드는… 눈에 보이는 화면…”
[^73]: @[08:07] “백엔드는 눈에 안 보이는…”
[^74]: @[08:14] “유튜브… 내용은… 레이아웃은…”
[^75]: @[08:20] “왼쪽 상단에 유튜브 로고… 홈 화면…”
[^76]: @[08:26] “돋보기… 검색…”
[^77]: @[08:31] “이외에 어떤 버튼이 어디에…”
[^78]: @[08:36] “유저 인터페이스 유저 익스피리언스… UI UX… 기존 경험… 암묵적인 약속…”
[^79]: @[08:52] “마치 암묵적인 약속이 된 것처럼 왼쪽 위에는 로고가 있고 오른쪽 위에는 로그인된 사용”
← 프로젝트에서 보기