웹앱은 어떤 언어로 만들까? 언어별 특징과 장단점 (나만의 스케줄러 만들기 1편)

웹앱을 만들려면 어떤 언어로 시작해야 할까요? 화면의 구조는 HTML, 모양은 CSS, 동작은 JavaScript가 맡습니다. 여기에 자료의 종류(타입) 검사를 더한 것이 TypeScript이고, 이 시리즈는 TypeScript와 Next.js로 만듭니다. 「나만의 스케줄러 만들기」 시리즈 1편으로, 언어마다 무엇을 잘하는지부터 정리합니다.

이 시리즈에서 만드는 것

오늘 할 일과 일정을 내 방식대로 정리하는 스케줄러입니다. 다른 사람에게 판매하거나 배포할 앱이 아니라, 내가 매일 쓰는 작은 도구를 만들어 PC와 휴대폰에서 쓰는 것이 목표입니다. 플레이스토어에 등록하지 않고, 휴대폰 홈 화면에 추가해 쓰는 방법까지 다룹니다. 순서는 이렇습니다.

1. 언어 고르기 (이 글)
2. 필요한 도구 알아보기: Node.js, React, Next.js, Supabase, Vercel, GitHub
3. 나만의 스케줄러 기획하기
4. 화면 만들기
5. 일정 저장하기
6. 인터넷에 올리고 휴대폰 홈 화면에 추가하기

AI가 코드를 대부분 써 주더라도, 언어마다 성격을 알아야 무엇을 시킬지 정할 수 있고 AI가 엉뚱한 방향으로 갈 때 알아챌 수 있습니다. 그래서 기본기부터 갑니다.

웹 화면은 세 가지 역할이 함께 만든다

웹 화면의 기본은 HTML, CSS, JavaScript입니다. 모두 "웹 언어"라고 부르기도 하지만, 정확히는 HTML은 구조를 표현하는 마크업 언어, CSS는 모양을 정하는 스타일 시트 언어, JavaScript는 동작을 만드는 프로그래밍 언어입니다.

기본적인 HTML·CSS·JavaScript 파일은 브라우저에서 바로 확인할 수 있습니다. 크롬 같은 브라우저만 있어도 작은 화면부터 만들어 볼 수 있습니다. 다만 이 시리즈에서 쓸 Next.js 개발 환경은 따로 준비해야 합니다(2편). Stack Overflow 2025년 개발자 설문에서도 JavaScript(66%)와 HTML/CSS(61.9%)가 가장 많이 쓰는 1, 2위였습니다.

JavaScript에 타입을 더한 언어: TypeScript

JavaScript는 자료의 종류를 유연하게 다룹니다. 편리하지만 서로 다른 종류의 값을 잘못 섞는 실수가 실행할 때 드러나기도 합니다.

TypeScript는 JavaScript에 자료의 종류, 즉 타입을 더한 언어입니다. 예를 들어 일정 제목은 문자열, 완료 여부는 참·거짓 값이라고 정해 두면, 완료 여부에 "완료"라는 글자를 넣는 식의 실수를 실행 전에 찾아 줍니다. TypeScript 코드는 JavaScript로 변환되어 브라우저에서 실행됩니다.

• 장점: 자료형이 안 맞는 실수를 실행 전에 잡습니다. 코드가 커져도 어디를 고쳐야 할지 보입니다. 화면과 서버 코드를 같은 언어로 쓸 수 있습니다.
• 약점: 처음엔 타입을 적는 것이 번거롭고 오류 문구가 낯섭니다. 모든 오류를 잡지는 않습니다. 입력한 날짜가 실제로 맞는지, 버튼이 원하는 대로 작동하는지는 따로 확인해야 합니다.

GitHub의 2025년 보고서(Octoverse)에 따르면, 그해 8월 월간 기여자 수 기준으로 TypeScript가 Python과 JavaScript를 앞질러 1위가 됐습니다. 보고서는 타입 검사가 AI와 함께 개발할 때 도움이 된다는 점도 짚었습니다. 물론 조사 기준이 달라지면 순위도 달라집니다.

다른 언어들은 무엇을 잘할까?

각 언어를 한 가지 용도로만 쓰는 것은 아닙니다. 처음 선택할 때 알아 두면 좋은 대표적인 용도를 정리했습니다. Python은 Stack Overflow 2025년 설문에서 전년보다 7%포인트 늘었을 만큼 AI 시대에 인기가 많습니다. 저도 처음에는 Python으로 내 PC에서 돌아가는 프로그램을 만들었습니다.

이 시리즈는 왜 TypeScript일까?

1. PC와 휴대폰에서 함께 쓰기 좋습니다. 화면 크기에 맞게 웹앱을 만들면 PC와 휴대폰 브라우저에서 쓸 수 있습니다. 휴대폰 홈 화면에 추가하면 아이콘을 눌러 바로 열 수 있습니다.
2. 화면과 서버 쪽 코드를 같은 언어로 씁니다. Next.js를 쓰면 화면 코드와 저장 요청을 처리하는 서버 코드에 TypeScript를 씁니다.
3. AI가 만든 코드를 확인하는 데 도움이 됩니다. 타입 검사를 실행하면 자료형이 맞지 않는 부분 같은 일부 실수를 미리 찾을 수 있습니다. 저도 AI가 고친 코드를 타입 검사로 한 번 더 확인합니다.

물론 간단한 스케줄러는 HTML·CSS·JavaScript만으로도 만들 수 있습니다. 이번에는 기능을 조금씩 늘리고 PC와 휴대폰에서 함께 쓰는 과정을 배우기 위해 TypeScript와 Next.js를 골랐습니다. 데이터 분석과 자동화가 중심이면 Python이, 휴대폰 기능을 깊게 활용하는 앱이라면 Kotlin이나 Swift가 더 맞을 수 있습니다.

플레이스토어에 올리지 않아도 된다

이번 목표는 나 혼자 편하게 쓰는 스케줄러입니다. 그래서 TWA로 안드로이드 앱을 만들거나 플레이스토어에 등록하는 과정은 필요하지 않습니다. 웹앱을 인터넷에 올리고 휴대폰 홈 화면에 추가해서 쓰면 됩니다. 설치형 웹앱인 PWA로 준비하는 방법은 마지막 6편에서 살펴봅니다.

처음부터 거창할 필요는 없습니다. 내가 매일 쓰고 싶은 기능 하나를 직접 만드는 것, 거기서 시작하면 됩니다.

정리

• 웹 화면은 HTML(구조), CSS(모양), JavaScript(동작)가 함께 만듭니다.
• TypeScript는 JavaScript에 타입을 더해 자료형 실수를 미리 잡습니다. 모든 오류를 잡지는 않지만, AI와 함께 만들 때 특히 쓸모가 큽니다.
• Python은 AI·데이터·자동화에, Kotlin·Swift는 휴대폰 기능을 깊게 쓰는 앱에, Flutter는 여러 기기용 앱에 강합니다. PC와 휴대폰에서 함께 쓰는 웹앱을 만드는 이 시리즈는 TypeScript로 갑니다.

원팩에서 만드는 업무 시스템 FROX도 TypeScript와 Next.js를 사용합니다. 이 시리즈에서 쓰는 도구가 실제 업무 시스템에 쓰이는 것과 같은 도구입니다.

다음 글(2편): Node.js, React, Next.js, Supabase, Vercel, GitHub가 각각 무엇이고, 이번 작업에서 어떤 역할을 맡는지 정리합니다.

출처

• GitHub, Octoverse 2025: AI leads TypeScript to #1 (2025-10)
• Stack Overflow, 2025 Developer Survey: Technology