프로젝트에서 보기 →

코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.

태그
교육 코딩 코딩 공부 순서 프로그래밍 공부
시작일
종료일
수정일

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

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

[? 질문] 앱/웹/게임 같은 서비스를 만들고 싶은 초보자는 코딩을 어떤 순서로 공부해야 가장 효율적인가[^2]
[= 답] 특정 언어(C, Java 등)를 처음부터 깊게 파기보다, 가장 쉽고 익숙한 웹(Web)로 시작해 프론트엔드(HTML→CSS→JS) 를 먼저 익히고, 그 다음 백엔드(쉬운 언어로 핵심 개념 4개만) → 프레임워크로 개발 경험을 쌓은 뒤 앱/게임으로 확장하는 것이 효율적이다.[^3]

[? 질문] 왜 처음부터 프로그래밍 언어의 내부(문법·어원/메모리 구조 등)를 깊게 공부할 필요가 없다고 보는가[^4]
[= 답] 언어의 ‘이론’만 깊게 아는 것이 실제 ‘서비스 만들기’로 바로 연결되지 않기 때문이다. 영어로 외국인과 대화하고 싶다면 문법·어원을 파는 것만으로 대화가 쉬워지지 않는 것처럼, 프로그래밍도 메모리 등 저수준까지 알아야만 앱/웹을 만들 수 있는 것은 아니다.[^5]

[? 질문] 프론트엔드와 백엔드를 왜 나누고, 왜 프론트엔드부터 추천하는가[^6]
[= 답] 대부분의 애플리케이션은 효율적인 구조를 위해 화면(클라이언트) 과 저장·처리(서버) 를 나눠 개발한다. 초보자에게는 프론트엔드가 사전지식이 상대적으로 적고, 작성한 결과가 화면에 즉시 보여 재미와 동기를 유지하기 쉬워 먼저 학습하기 좋다.[^7]

2. 큰 그림[^8]

이 콘텐츠는 “코딩을 배워 앱·웹 같은 서비스를 만들고 싶은 사람”을 대상으로, 초보자가 흔히 빠지는 ‘특정 언어부터 깊게 파기’ 함정을 피하고 실제로 만들기를 빠르게 시작하는 공부 순서를 제안한다.[^9] 웹을 출발점으로 삼아 프론트엔드→백엔드→프레임워크→프로젝트로 이어지는 학습 경로를 안내하며, 나아가 앱·게임 개발로 확장하는 연결고리까지 설명한다.[^10]

  • 언어 깊이보다 ‘만들기’ 우선: 초기에 C/Java 같은 언어를 깊게 파기보다, 필요한 만큼 배우고 만들면서 부족한 것을 찾아 보완하는 방식이 효율적이라고 주장한다.[^11]
  • 웹(프론트엔드)로 진입 장벽 낮추기: 웹은 도구가 많고 난이도가 상대적으로 낮으며, 결과가 브라우저에서 즉시 확인돼 초보자가 흥미를 유지하기 쉽다고 설명한다.[^12]
  • 프레임워크+프로젝트로 빠르게 실전: 백엔드는 원래 알아야 할 개념이 많지만 프레임워크가 많은 부분을 대신해주므로, 프레임워크 도움을 받아 프로젝트를 완성하며 학습하는 것이 지식 습득과 서비스 이해에 유리하다고 말한다.[^13]

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

3.1 “언어를 깊게”가 목표가 되면 오히려 멀어진다: 영어 비유로 문제 제기[^15]

📸 0:00

영상은 시작부터 “프로그래밍 언어를 깊게 공부할 필요는 없다”는 관점을 제시한다.[^1] 이를 설명하기 위해 영어 학습 비유를 든다.[^4]

  • 어떤 사람이 “외국인이랑 대화를 하고 싶어서 영어를 배우는 상황”을 가정한다.[^4]
  • 이때 영어의 문법, 어원 등 “언어적인 것만 깊숙히” 아는 것이 실제로 외국인과 “쉽게 대화”하는 능력으로 직결되지는 않는다고 말한다.[^5]
  • 이 비유를 통해, 프로그래밍도 “서비스를 만들기”가 목적이라면 언어 자체의 깊은 이론(예: 저수준 구조)을 목표처럼 붙잡고 시작하는 것이 꼭 효율적이지 않다는 문제의식을 깔아둔다.[^5]

이후 본인의 채널 정체성을 “누구나 배울 수 있는 쉬운 코딩채널”로 소개하고, 이번 영상의 주제가 코딩 공부 순서임을 명확히 한다.[^16]

3.2 사람들의 실제 목적(앱/게임/서비스 만들기)과 흔한 착각(C/Java부터)의 충돌[^17]

📸 0:30

화자는 시청자에게 먼저 목적을 묻는다.[^18]

  • [? 여러분은 어떤 목적으로 코딩을 공부하시나요?][^18]
  • [= 코딩 목적은 다양하지만, 많은 사람은 ‘자기가 만들고 싶은 게임/앱 등 서비스’를 만들기 위해 코딩을 시작한다][^19]

그런데 “아이러니하게도” 바로 그 목적을 가진 초보자들이 C언어, Java 같은 특정 언어에 집중해 개념을 깊게 파고 예제도 꼼꼼히 풀면서 시작하는 경우가 많다고 지적한다.[^20]

여기서 화자는 균형을 잡는다.

  • 특정 언어를 깊게 마스터하는 것이 “나중에” 애플리케이션 개발에 “굉장히 많은 도움이” 되는 건 맞다고 인정한다.[^21]
  • 하지만 초보자가 그렇게 시작하면:
    • 낯설고 어렵게 느껴지고[^21]
    • 코딩 자체에 대한 흥미가 떨어질 수 있다고 경고한다.[^21]

그리고 본인의 경험을 짧게 덧붙인다. “C언어가 제일 기본이라고 해서 시작했다가 너무 어려워서 ‘내가 코딩에 재능이 없나’ 싶었다”는 취지의 고백을 자막/멘트로 제시해, 초보자가 느끼는 좌절이 흔한 일임을 암시한다.[^21]

[!IMPORTANT] 초보자 좌절 포인트
초보자가 “기본은 C/Java”라는 말만 듣고 저수준·언어 문법 중심으로 파고들면, 서비스 제작이라는 원래 목표와 멀어지고 난이도 때문에 흥미를 잃을 수 있다는 문제의식이 영상의 출발점이다.[^21]

3.3 첫 출발은 “가장 쉽고 익숙한 것”: 웹(Web)을 추천하는 이유들[^22]

📸 1:13

화자는 초보자에게는 “가장 쉽고 익숙한 것부터 시작”해야 한다고 말하고, 그 대상으로 웹(Web) 을 지목한다.[^23]

웹(Web)의 의미 정의

웹이란 인터넷 익스플로어/크롬/사파리 같은 인터넷 브라우저로 접속 가능한 모든 사이트를 의미한다고 설명한다.[^24] 예시로 네이버, 구글, 쿠팡 등 대표 사이트를 언급한다.[^25]

초보자에게 웹을 추천하는 이유(3가지 이상)

화자는 “정말 여러가지” 이유가 있다고 말하며, 주요 근거를 나열한다.[^26]

  1. 상대적으로 난이도가 낮다
    웹은 다른 어떤 개발에 비해서도 난이도가 낮은 편이라고 주장한다.[^27]

  2. 개발 도구가 많아 누구나 쉽게 시작 가능
    웹 개발에 필요한 도구가 “굉장히 많은 편”이라 쉽게 시작할 수 있다고 말한다.[^28]

  3. 배포/접근이 쉬움: 브라우저만 있으면 다양한 기기에서 동작
    웹으로 만든 서비스는 컴퓨터뿐 아니라 스마트폰, 태블릿 등에서도 인터넷 브라우저만 있으면 어디서든 이용 가능하다고 강조한다.[^29]

이 지점에서 영상은 “그렇다면 웹 개발을 어디서부터 어떻게 공부해야 할까?”라는 다음 단계 질문으로 넘어간다.[^30]

3.4 웹 개발의 큰 분류: 프론트엔드(클라이언트) vs 백엔드(서버) + 로그인 예시[^31]

📸 2:10

본격적인 학습 순서를 말하기 전에, 화자는 “기본적인 웹 개발의 분야”를 먼저 설명하겠다고 한다.[^32]

개발은 크게 2가지로 나뉜다

화자는 개발을 2가지로 나눈다.[^33]

  1. Front-End (Client Side)
  • “우리가 보는 화면을 구성”하는 영역이라고 설명한다.[^34]
  • 사용자가 정보를 받고 실제로 “눈으로 보는 부분”이 클라이언트 사이드/프론트엔드라고 말한다.[^34]
  1. Back-End (Server Side)
  • 화면에 보여줄 정보를 “저장, 처리, 가공”하는 부분이라고 설명한다.[^35]
  • 이를 백엔드 혹은 서버사이드라고 부른다.[^35]

로그인 상황으로 “왕복 흐름”을 설명

중간 정리로 로그인 예시를 든다.[^36]

  • 사용자가 프론트엔드에서 아이디/패스워드를 입력하고 “전송”한다.[^37]
  • 백엔드에서는 DB를 조회하고 “ID가 존재하는지”, “ID/PW가 일치하는지”를 검사한다.[^37]
  • 일치하면 “OK, 로그인 성공” 결과를 만들고, 프론트엔드에 “로그인 성공 화면을 표시해”라고 알려준다.[^38]
  • 프론트엔드는 그 지시에 따라 로그인 성공 화면을 표시한다.[^38]

또한 이 프론트엔드/백엔드 구분은 웹뿐 아니라 앱, 윈도우 애플리케이션 등 “어떠한 애플리케이션이라도” 효율적인 구조를 위해 나누어 개발한다고 확장 설명한다.[^39]

3.5 왜 프론트엔드부터? “사전지식 적고 즉시 보이는 재미”[^40]

📸 3:09

화자는 웹 개발 학습 경로에서 프론트엔드를 먼저 학습할 것을 추천한다.[^40] 그 이유는 다음과 같이 제시된다.

  • 프론트엔드는 개발에 필요한 사전지식이 “상대적으로 적고”[^41]
  • 코딩한 대로 화면에 “바로바로 나오기 때문에”[^41]
  • 초보자가 “재미있게” 공부할 수 있다는 것이다.[^41]

즉, 학습 지속을 위해 ‘즉각적 피드백(화면)’과 ‘낮은 선행지식 요구’를 강조한다.[^41]

3.6 웹 프론트엔드 3요소: HTML, CSS, JavaScript + “그림 그리기” 비유[^42]

📸 3:30

화면을 만드는 웹 프론트엔드를 위해 필요한 언어 지식은 크게 3가지: HTML, CSS, JavaScript라고 제시한다.[^43]

“쉽다면서 3가지나?”라는 반응을 선제 대응

화자는 시청자가 “쉽다면서 무슨 3가지 언어나 배워서 만들어야 하냐?”라고 생각할 수 있다고 언급한다.[^44] 이에 대한 답은:

  • 각각의 개념이 크게 어렵지 않고[^44]
  • 서로 유기적으로 연결되어 있어 차근차근 배우면 어렵지 않다는 것이다.[^44]

또한 HTML과 CSS는 마크업 언어로 “구조만 표시하기 위한 언어”이며, “개발언어 취급도 못 받는 언어”라고 표현하면서 겁먹지 말라고 말한다.[^45]

그림 그리기 비유로 역할을 직관화

처음 듣는 사람에겐 어렵게 느껴질 수 있으니 비유로 설명한다고 하며, “그림을 그린다”는 상황을 설정한다.[^46]

  • HTML = 연필

    • 전체 밑그림을 그리는 역할.[^47]
    • 웹에서는 “홈페이지 제목은 뭐로 할지”, “로그인창을 어디에 둘지” 같은 기본 뼈대를 작성하는 언어라고 설명.[^48]

  • CSS = 물감

    • HTML로 만든 뼈대에 색을 칠하고, 위치를 수정하며 화려하게 만드는 역할.[^49]

  • JavaScript = 플립북(움직임)

    • 앞서 그린 그림을 움직이게 만드는 플립북 같은 역할이라고 설명.[^50]

[!TIP] 비유로 기억하는 3요소
HTML(연필=구조/뼈대) → CSS(물감=꾸미기/배치) → JavaScript(플립북=동작/상호작용) 순으로 떠올리면, 각 기술이 “무엇을 담당하는지”가 헷갈리지 않도록 돕는다.[^47]

추천 학습 순서(프론트엔드 내부 순서)

화자는 학습 순서를 명시한다.[^51]

  1. HTML, CSS부터 공부하며 화면을 그려본다.[^51]
  2. 그 다음 JavaScript를 추가해 공부한다.[^51]

그리고 JavaScript는 “(진정한?) 프로그래밍 언어”라 배울 양이 많다고 덧붙인다.[^52] 따라서 초반에는:

  • 웹의 요소를 선택하고 제어할 수 있을 정도로만 “간단히 공부하고 넘어가라”고 권한다.[^53]

3.7 프론트엔드만으로도 할 수 있는 것: API 조합으로 서비스 만들기[^54]

📸 5:09

화자는 “프론트엔드 기초만 어느 정도 할 줄 알아도” 만들 수 있는 것이 많고 활용 분야가 넓다고 말한다.[^55]

이를 뒷받침하기 위해 API를 소개한다.

  • API를 “미리 만들어 놓은 가져다 쓸 수 있는 기능”으로 설명한다.[^56]
  • 네이버, 구글 등이 제공하는 API는, 굳이 백엔드가 없어도 프론트엔드에 “한 줄 붙여넣기만” 하면 지도 표시 같은 기능이 “바로” 동작할 수 있다고 예시를 든다.[^57]
  • 지도 외에도 번역, 채팅, 결제 등 “굉장히 편리한 API”가 많다고 언급한다.[^58]
  • 그리고 이런 API들을 “잘 조합”하면 “상당히 쓸만한 서비스”를 만들 수 있다고 결론낸다.[^59]

[!NOTE] 여기서 말하는 ‘가능’의 의미
화자가 강조하는 포인트는 “처음부터 백엔드/저수준을 다 알아야만 의미 있는 결과물을 만들 수 있는 게 아니라”, 프론트엔드+외부 API 조합만으로도 사용자에게 가치 있는 결과물을 빠르게 만들 수 있다는 관점이다.[^57]

3.8 백엔드 학습로 넘어가기: “진정한 백엔드부터는 언어 사용” + 그래도 깊게는 X[^60]

📸 5:52

프론트엔드 개념이 잡히면 “백엔드를 공부해야겠죠”라고 전환한다.[^60] 그러면서:

  • “(진정한) 백엔드부터는 프로그래밍 언어가 어느 정도 사용”된다고 말한다.[^61]
  • 하지만 다시 한번 “초기에 프로그래밍 언어를 깊게 공부할 필요는 없다”고 강조한다.[^62]

여기서도 초반에 제시했던 영어 비유를 거의 같은 형태로 반복한다.[^63]

  • 외국인과 대화하고 싶은데 문법/어원만 깊게 파도 대화가 쉬워지는 건 아니라는 논지.[^63]
  • 프로그래밍도 “메모리가 어떻게 사용되는지” 같은 것까지 깊이 알아야 앱을 만들 수 있는 것은 아니라는 주장.[^64]

3.9 백엔드(또는 일반 프로그래밍)에서 초반에 잡을 것: 4가지 핵심 개념만[^65]

📸 6:25

화자는 백엔드 로직을 만들기 위해 초기에 방대한 문법/이론 대신, 쉬운 언어로 “가장 기본적인 개념”을 먼저 잡으라고 제안한다.[^66]

  • 쉬운 언어 예시: JavaScript, Ruby, Python[^66]
  • 추천하는 초반 핵심 개념 4가지:
    1. 변수[^66]
    2. 조건문[^66]
    3. 반복문[^66]
    4. 함수[^66]

그리고 이 4가지만 우선 학습하라고 권하는 이유를 명시한다.[^67]

  • [= 백엔드 로직을 구성하면서 더 필요한 부분이 생기면 그때그때 찾아서 공부하는 것이 훨씬 효율적이기 때문][^67]

즉 “선(先)전부학습”이 아니라 “필요 기반 학습(Just-in-time learning)”을 강조한다.[^67] 또한 “상당히 많은 웹 서비스가” 이 4가지 개념을 잘 이해하면 만들 수 있을 정도로, 처음부터 “크게 어려운 개념”이 필요하지 않다고 말한다.[^68]

3.10 백엔드는 원래 어려웠다: SQL/DB/세션/쿠키 → 프레임워크가 대신해준다[^69]

📸 7:01

화자는 백엔드를 “원래 굉장히 알아야 할 것이 많은 분야”였다고 말한다.[^70] 구체 예시로 다음 개념을 나열한다.

  • SQL, Database, Session, Cookie 등[^71]
  • 이런 기본 개념을 이해하고 활용할 줄 알아야 백엔드를 구성할 수 있었다고 설명한다.[^71]
  • 다만 “무슨 말인지 모르셔도 됩니다”라고 덧붙여, 초보자에게는 여기서 겁먹지 말라는 메시지를 준다.[^72]

그리고 전환점으로 프레임워크를 소개한다.

  • 프레임워크를 “개발에 필요한 것들을 미리 만들어 놓은 도구 모음”으로 정의한다.[^73]
  • 이제는 웹 프레임워크가 많은 역할을 해주기 때문에, 개념을 잘 모르더라도 “프레임워크의 도움을 받아서” 쉽게 개발할 수 있다고 말한다.[^74]

언어별 프레임워크 예시

화자는 언어별로 다양한 프레임워크가 존재한다고 말하며 예시를 든다.[^75]

  • Java → Spring[^75]
  • Python → Django[^75]
  • Ruby → Rails[^75]

3.11 초보자 추천 프레임워크: Ruby on Rails + “적게 배우고 많이 한다”[^76]

📸 7:28

화자는 개인적으로 초보자에게 추천하고 싶은 프레임워크로 Ruby on Rails를 제시한다.[^76]

  • Rails를 “덕담과도 같은 프레임워크”라고 표현하며, “적게 배우고 많이 써먹읍시다”라는 메시지를 붙인다.[^77]
  • 본인의 경험상 지금까지 배운 프레임워크 중 “가장 적게 배우고 가장 많은 일을 할 수 있었던 프레임워크”였다고 평가한다.[^78]
  • 영상에는 농담/덕담 형태의 멘트(“적게 일하고 많이 버시고…”)도 자막으로 제시되며, 생산성 높은 도구를 통해 초보자가 성취감을 빠르게 얻길 바라는 톤을 전달한다.[^77]

3.12 여기까지 하면 무엇을 만들 수 있나: “간단한 웹 사이트” + 프로젝트 기반 학습 권장[^79]

📸 7:39

프론트엔드와 백엔드까지 모두 공부하면 “웬만한 간단한 웹 사이트는 만들 수 있다”고 말한다.[^79]

그리고 다음 학습 방식으로 프로젝트 형식을 강하게 권한다.[^80]

  • 만들고 싶은 웹 서비스를 “프로젝트 형식으로 완성해가는 것”을 목표로 공부하라고 제안한다.[^80]
  • 이렇게 하면:
    • “따로 공부를 하고 만드는 것”보다 더 빠른 속도로 지식을 습득할 수 있고[^81]
    • 자연스럽게 IT 서비스 전반에 대한 이해도도 생길 것이라고 말한다.[^82]

[!IMPORTANT] 학습 전략의 결론(이 구간에서의 메시지)
“공부를 충분히 한 다음 만들기”가 아니라, “만들면서 공부하기”로 전환해야 학습 속도와 서비스 이해가 함께 올라간다는 논리를 제시한다.[^80]

3.13 다음 확장: 웹을 먼저 하면 앱(모바일)도 수월해진다[^83]

📸 8:22

웹으로 전반적 이해가 되면 다음으로 “(모바일) 앱도 만들어 볼 수” 있다고 말한다.[^83]

여기서 앱 개발을 다음처럼 단순화해 설명한다.

  • 앱을 만든다는 것은 앱의 클라이언트, 즉 프론트엔드 부분을 만드는 것이라고 말한다.[^84]
  • 그리고 백엔드는 “기존에 웹에서 만들어 뒀던 걸 그대로 활용”할 수 있다고 주장한다.[^85]
  • 따라서 웹으로 개념을 먼저 잡고 앱을 만들면 초보자도 더 수월할 것 같다고 결론낸다.[^85]

3.14 게임을 만들고 싶다면? 프론트/백 원리는 게임에도 그대로 적용[^86]

📸 8:44

게임을 만들고 싶은 사람에게도, 앞서 배운 프론트엔드/백엔드 원리가 적용된다고 설명한다.[^86]

  • 게임에서도 클라이언트 사이드(프론트엔드) 부분을 만들고[^87]
  • 웹에서 만들었던 백엔드를 활용해 “레벨 저장, 점수 저장” 같은 로직을 처리할 수 있으며[^87]
  • 결국 기본을 웹으로 시작하고 앱/게임/기타 개발로 넘어가면 이해가 더 빠르고 쉽게 배울 수 있을 것이라고 말한다.[^88]

3.15 마무리: 이번 영상은 ‘기초적인 순서’만, 질문은 댓글로 + 향후 실습 콘텐츠 예고[^89]

📸 9:10

화자는 영상이 길어지지 않게 자신이 생각하는 공부 방법(순서)을 “굉장히 기초적인 부분만” 말했다고 정리한다.[^89] 더 자세한 내용이 궁금하면 댓글로 질문하면 성실히 답변하겠다고 안내한다.[^90]

또한 앞으로 이 공부 방법대로 “재미있게 실습 위주로 공부”할 수 있는 콘텐츠를 업로드할 예정이라고 말하며, 구독/좋아요/알림설정 요청과 함께 영상을 마무리한다.[^91]

4. 핵심 통찰[^92]

  1. [c 초보자의 목표가 ‘언어 마스터’가 아니라 ‘서비스 제작’이라면, 학습 순서는 결과물을 빨리 만드는 방향(웹→프론트→백→프로젝트)으로 설계되어야 한다.] [^3]

    • 실행: 만들고 싶은 간단한 웹 서비스를 하나 정하고, HTML/CSS로 화면부터 만든 뒤 기능은 최소 JS로 붙여본다.[^51]

  2. [h ‘깊게 공부’는 나중에 도움이 되지만, 초반에는 흥미를 잃게 만드는 비용이 될 수 있다.] [^21]

    • 실행: 초반에는 “완벽한 이해” 대신 “동작하는 결과”를 기준으로 학습 범위를 제한한다(예: JS는 DOM 선택/제어 정도).[^53]

  3. [h 프론트엔드는 사전지식이 적고 피드백이 즉각적이라 학습 지속에 유리하다.] [^41]

    • 실행: 브라우저에서 바로 확인 가능한 작은 UI(로그인 폼, 리스트, 카드 레이아웃)를 반복 제작한다.[^41]

  4. [h 백엔드/프로그래밍 언어는 초반에 4개 개념(변수·조건·반복·함수)만 잡고, 필요할 때 확장하는 방식이 효율적이다.] [^66]

    • 실행: API 요청/응답 처리 같은 간단한 로직을 만들며 모르는 개념을 그때그때 보충한다.[^67]

  5. [h 프레임워크는 원래 백엔드가 요구하던 많은 지식을 대체해, 초보자가 더 빠르게 개발 경험을 쌓게 해준다.] [^74]

    • 실행: 언어별 프레임워크(Spring/Django/Rails)를 비교하되, 하나를 골라 CRUD(게시판/할일목록) 프로젝트를 완성한다.[^75]

  6. [h 웹을 먼저 하면 앱/게임으로 확장할 때 ‘클라이언트-서버’ 구조 이해를 재사용할 수 있다.] [^85]

    • 실행: 웹에서 만든 백엔드(회원/점수/저장 로직)를 앱/게임에서도 재활용하는 설계를 염두에 두고 학습한다.[^87]

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

웹(Web): 크롬/사파리 같은 브라우저로 접속 가능한 모든 사이트/서비스를 의미.[^24]
프론트엔드(Front-End) / 클라이언트 사이드(Client Side): 사용자가 보는 화면을 구성하고, 정보를 표시하는 영역.[^34]
백엔드(Back-End) / 서버 사이드(Server Side): 화면에 보여줄 정보를 저장·처리·가공하고, DB 조회/검증 같은 로직을 수행하는 영역.[^35]
DB(Database): (로그인 예시에서) 아이디 존재 여부, 비밀번호 일치 여부 등을 확인하기 위해 조회하는 데이터 저장소로 언급됨.[^37]
API: “미리 만들어 놓은 가져다 쓸 수 있는 기능”으로, 프론트엔드에 간단히 붙여 지도/번역/채팅/결제 등을 사용할 수 있다고 설명.[^56]
프레임워크(Framework): 개발에 필요한 것들을 미리 만들어 둔 도구 모음으로, 백엔드 개발 난이도를 낮춰주는 역할로 소개.[^73]
세션(Session), 쿠키(Cookie): 과거 백엔드에서 알아야 할 개념 예시로 언급(자세한 설명은 생략해도 된다고 안내).[^71]
SQL: 과거 백엔드에서 알아야 할 개념 예시로 언급.[^71]

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

  • 제목: 코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.[^94]
  • 채널: 조코딩 JoCoding[^94]
  • 길이: 9분 51초[^94]
  • 링크: https://www.youtube.com/watch?v=wpUiN5hBnyc[^94]

[^1]: @[00:00] “프로그래밍 언어를 깊게 공부할 필요는 없습니다.”
[^2]: @[00:30] “여러분은 어떤 목적으로 코딩을 공부하시나요?”
[^3]: @[01:13] 처음은 쉬운 것부터 → @[01:19] 웹 추천 → @[03:09] 프론트 먼저 추천 → @[04:48] HTML/CSS 후 JS → @[06:25] 변수/조건/반복/함수 → @[07:13] 프레임워크 → @[08:22] 앱으로 확장 → @[08:44] 게임으로 확장
[^4]: @[00:04] “외국인이랑 대화를 하고 싶어서 영어를 배우는데…”
[^5]: @[06:17] “프로그래밍도 메모리가 어떻게 사용되는지…까지 알아야…아닙니다” + @[00:04] 영어 비유의 결론 취지
[^6]: @[02:15] “개발은 크게 2가지로 나눌 수 있습니다.”
[^7]: @[03:13] “필요한 사전지식…적고…바로바로 나오기 때문에…재미있게”
[^8]: @[00:25] “이번 영상에서는 코딩 공부 순서” + @[01:19] 웹 추천 흐름
[^9]: @[00:32] 만들고 싶은 게임/앱/서비스 목적 언급 + @[00:44] C/Java 집중의 아이러니
[^10]: @[05:52] 프론트 후 백엔드 + @[08:22] 앱 + @[08:44] 게임으로 확장
[^11]: @[06:00] 초기에 언어를 깊게 공부할 필요 없음 + @[06:39] 필요할 때 찾아 공부가 효율적
[^12]: @[01:39] 난이도 낮음 + @[01:44] 도구 많음 + @[01:49] 다양한 기기에서 브라우저로 이용
[^13]: @[07:13] 프레임워크 정의 + @[07:13] 프레임워크 도움으로 쉽게 개발 + @[07:45] 프로젝트로 완성하며 더 빠르게 습득
[^14]: 영상 전체 전개(00:00~09:39) 기반 정리
[^15]: @[00:00]~@[00:06] 언어 깊게 불필요 + 비유 도입
[^16]: @[00:21] 채널 소개 + @[00:25] 주제 소개
[^17]: @[00:30]~@[01:13] 목적 질문→초보 학습 오류→대안 제시
[^18]: @[00:30] 목적 질문
[^19]: @[00:32] 게임/앱/서비스 만들기 목적
[^20]: @[00:44] C언어, Java 등 특정 언어에 집중
[^21]: @[00:58] 언어 마스터는 도움되지만 초보에겐 낯설고 어렵고 흥미 저하(경험 고백 포함)
[^22]: @[01:13]~@[02:06] 웹을 첫 단계로 추천하며 이유 제시
[^23]: @[01:13] 쉬운 것부터 + @[01:19] 웹이 그 대상
[^24]: @[01:23] 웹 정의(브라우저로 접속 가능한 사이트)
[^25]: @[01:31] 네이버/구글/쿠팡 예시
[^26]: @[01:36] “초보자분들에게 웹을 추천하는 이유는…”
[^27]: @[01:39] 웹 난이도 낮음
[^28]: @[01:44] 도구 많아 쉽게 시작
[^29]: @[01:49] 브라우저만 있으면 다양한 기기에서 이용
[^30]: @[02:06] “웹 개발을 어디서부터 어떻게…”
[^31]: @[02:10]~@[03:03] 분야 설명 + 로그인 예시 + 보편성
[^32]: @[02:10] 순서 설명 전, 분야 먼저
[^33]: @[02:15] 개발 2가지로 나눔
[^34]: @[02:17]~@[02:23] 프론트엔드/클라이언트 정의
[^35]: @[02:30]~@[02:37] 백엔드/서버사이드 정의
[^36]: @[02:41] 로그인 예시로 중간 정리
[^37]: @[02:44] 프론트 입력/전송 → 백엔드 DB 조회/검사
[^38]: @[02:51] 일치하면 성공 화면 표시 요청
[^39]: @[02:57] 앱/웹/윈도우 등 어떤 앱이든 구조 분리
[^40]: @[03:09] 프론트엔드 먼저 추천
[^41]: @[03:13] 사전지식 적고 결과가 바로 보여 재미
[^42]: @[03:23]~@[05:09] 프론트엔드 언어 3개와 비유, 학습 순서
[^43]: @[03:30] HTML/CSS/JS 필요
[^44]: @[03:36]~@[03:42] 3개 언어에 대한 반응 + 어렵지 않음/유기적 연결
[^45]: @[03:49] HTML/CSS는 마크업 언어라 겁먹지 말라
[^46]: @[04:03] 비유로 설명 예고
[^47]: @[04:11]~@[04:19] HTML=연필, 밑그림
[^48]: @[04:19]~@[04:24] 제목/로그인창 위치 등 뼈대
[^49]: @[04:28]~@[04:32] CSS=물감, 꾸미기/수정
[^50]: @[04:40]~@[04:48] JS=플립북, 움직임
[^51]: @[04:48]~@[04:55] HTML/CSS 후 JS 순서
[^52]: @[04:59] JS는 배울 양 많음
[^53]: @[05:03] 요소 선택/제어 정도만 공부하고 넘어감
[^54]: @[05:09]~@[05:32] 프론트엔드 활용 범위 + API 설명
[^55]: @[05:09] 프론트엔드 기초만으로도 많이 만들 수 있음
[^56]: @[05:16] API 정의
[^57]: @[05:16]~@[05:29] 한 줄 붙여넣기로 지도 표시 예시
[^58]: @[05:29] 번역/채팅/결제 등 API
[^59]: @[05:32] API 조합하면 쓸만한 서비스 가능
[^60]: @[05:52]~@[06:00] 프론트 후 백엔드로 전환
[^61]: @[05:56] 백엔드부터는 언어 사용
[^62]: @[06:00] 초기에 언어 깊게 불필요(재강조)
[^63]: @[06:06] 영어 비유 반복
[^64]: @[06:17] 메모리 등 깊게 몰라도 됨
[^65]: @[06:25]~@[06:52] 쉬운 언어로 4개 개념만 + 이유
[^66]: @[06:25] JS/Ruby/Python + 변수/조건/반복/함수
[^67]: @[06:39] 필요할 때 찾아 공부가 효율적
[^68]: @[06:46]~@[06:52] 4개만 이해하면 많은 웹서비스 가능, 어려운 개념 불필요
[^69]: @[07:01]~@[07:22] 백엔드 원래 어려움 + 프레임워크가 도움
[^70]: @[07:01] 백엔드는 원래 알아야 할 게 많음
[^71]: @[07:04] SQL/DB/Session/Cookie 등
[^72]: @[07:04] “무슨 말인지 모르셔도 됩니다...”
[^73]: @[07:13] 프레임워크 정의
[^74]: @[07:13] 프레임워크가 역할, 몰라도 도움받아 개발
[^75]: @[07:22]~@[07:28] Spring/Django/Rails 예시
[^76]: @[07:28] Rails 추천
[^77]: @[07:32] “적게 배우고 많이 써먹읍시다” 및 덕담 자막
[^78]: @[07:39] 가장 적게 배우고 가장 많은 일을
[^79]: @[07:39]~@[07:45] 웹사이트 제작 가능
[^80]: @[07:45] 프로젝트로 완성 목표 권장
[^81]: @[07:52] 더 빠른 속도로 지식 습득
[^82]: @[07:57] IT 서비스 전반 이해도 증가
[^83]: @[08:22] 다음은 앱
[^84]: @[08:27] 앱=클라이언트(프론트) 만들기 설명
[^85]: @[08:32] 백엔드 재활용 가능 → 웹 먼저 하면 수월
[^86]: @[08:44] 게임에도 원리 적용
[^87]: @[08:51] 클라이언트 만들고 백엔드로 레벨/점수 저장 로직 동일
[^88]: @[09:01] 웹→다른 개발로 넘어가면 이해 빠르고 쉬움
[^89]: @[09:10] 기초만 설명했다고 정리
[^90]: @[09:16] 댓글 질문 요청
[^91]: @[09:22] 실습 위주 콘텐츠 업로드 예정 + 구독/좋아요/알림 + 마무리
[^92]: 영상 전반 결론(웹부터, 프론트→백, 필요 기반 학습, 프레임워크, 프로젝트, 확장) 종합: @[01:19], @[03:09], @[06:25], @[07:13], @[07:45], @[08:22]
[^93]: 용어들은 영상에서 직접 정의/예시로 제시: @[01:23], @[02:17], @[02:37], @[05:16], @[07:13] 등
[^94]: 사용자가 제공한 메타데이터(제목/채널/길이/링크)

← 프로젝트에서 보기