VSCode(비주얼 스튜디오 코드) 초보자가 가장 먼저 알아야 할 기능 정리

                        

 개발 공부를 처음 시작하면 가장 먼저 만나게 되는 프로그램 중 하나가 바로 Visual Studio Code 입니다.

줄여서 VSCode라고 많이 부르는데, 무료인데도 기능이 정말 많고 확장성도 좋아서 현재 가장 많이 사용되는 개발 도구 중 하나입니다.

저도 처음에는 메뉴가 너무 많아서 어디를 눌러야 하는지조차 헷갈렸습니다.
특히 바이브코딩이나 웹개발을 시작하면 VSCode를 거의 매일 사용하게 되는데, 기본 기능 몇 가지만 익혀도 작업 속도가 꽤 빨라집니다.

이번 글은 실제로 공부하며 정리했던 내용을 기준으로, 초보자 입장에서 “이건 알아두면 좋다” 싶은 기능들을 정리해봤습니다.

VSCode 화면에서 자주 사용하는 메뉴

처음 실행하면 메뉴가 굉장히 많아 보이는데, 실제로 초보자가 자주 사용하는 건 생각보다 많지 않습니다.

테마(색상) 변경하기

처음 설치하면 화면 색상이 낯설 수 있습니다.

상단 메뉴에서 아래 순서로 이동하면 됩니다.

• File
• Preferences
• Themes
• Color Theme

또는 왼쪽 하단의 프로필 아래 톱니바퀴(설정) → Themes에서도 변경 가능합니다.

이 기능은 프로그램 전체 색상을 변경하는 기능인데,
눈이 편한 색상으로 바꾸면 오래 작업할 때 피로감이 조금 줄어듭니다.

보통 다크 테마를 많이 사용합니다.

VSCode 테마 변경 화면 예시

  

화면 확대 / 축소

글자가 너무 작거나 크면 작업하기 불편합니다.

상단 메뉴에서:

• View
• Appearance
• Zoom In / Zoom Out

으로 변경 가능합니다.

단축키는 Windows 기준:

• Ctrl + 숫자패드 +
• Ctrl + 숫자패드 -

또는 키패드의 = / - 로도 가능합니다.

개발은 글자를 오래 봐야 하기 때문에
자기 눈에 맞는 크기로 조절하는 게 생각보다 중요합니다.

왼쪽 메뉴바 기능 설명

VSCode 왼쪽에는 세로 메뉴바가 있습니다.
처음엔 아이콘만 보여서 무슨 기능인지 헷갈립니다.

1. Explorer (탐색기)

종이 두 장 겹친 모양 아이콘입니다.

가장 많이 사용하는 기능 중 하나입니다.

여기서:

• 새 작업 생성
• 폴더 열기
• 파일 관리
• GitHub 저장소 가져오기

등을 할 수 있습니다.

프로젝트를 시작하면 거의 항상 Explorer를 사용하게 됩니다.

VSCode Explorer 화면 예시

          

2. Search (검색)

돋보기 모양 아이콘입니다.

프로젝트 내부에서 특정 단어나 코드를 검색할 때 사용합니다.

파일이 많아질수록 정말 자주 사용하게 됩니다.

3. Source Control

Git 설치 후 사용 가능한 기능입니다.

GitHub 와 연동해서 버전 관리할 때 많이 사용합니다.

초보 때는 어렵게 느껴질 수 있지만:

• 수정 내역 확인
• 커밋
• 푸시

같은 기능들을 GUI 형태로 쉽게 처리할 수 있습니다.

4. Run and Debug

코드 실행 및 디버깅 기능입니다.

초심자 기준으로는 사용 빈도가 비교적 낮은 편입니다.

하지만 프로젝트 규모가 커지면 점점 중요해집니다.

5. Extensions (확장 프로그램)

VSCode의 핵심 기능 중 하나입니다.

코딩에 필요한 부가 기능을 설치해서 사용할 수 있습니다.

사실 VSCode가 인기 많은 가장 큰 이유 중 하나가 바로 확장 프로그램 생태계입니다.

초보자가 많이 사용하는 VSCode 확장 프로그램 정리

(★ 표시는 내가 사용하는 것)

★ GitHub Copilot

GitHub 공식 AI 코드 보조 기능입니다.

코드를 자동 추천해주고,
설명도 해주며, 반복 작업을 줄여줍니다.

바이브코딩 스타일과도 잘 맞는 편입니다.

Astro

블로그나 웹사이트 제작에 사용되는 정적 사이트 제작 도구입니다.

속도가 빠르고 SEO에도 강점이 있어서 최근 많이 사용됩니다.

★ Auto Close Tag

HTML/XML 태그를 자동으로 닫아주는 기능입니다.

예를 들어:

<div>

만 입력해도 자동으로 닫는 태그를 생성해줍니다.

Auto Complete Tag

HTML/XML 태그 자동완성 기능입니다.

태그 페어링 수정도 자동으로 처리해줍니다.

★ Auto Rename Tag

앞 태그 수정 시 뒤 닫는 태그도 같이 수정됩니다.

초보자 실수를 꽤 많이 줄여줍니다.

Babel JavaScript

Babel

자바스크립트 문법 처리 및 최신 문법 호환을 도와줍니다.

JavaScript 관련 작업 시 거의 필수급입니다.

Cline

오픈소스 기반 코드 어시스턴트입니다.

Cursor 같은 유료 도구가 부담스러울 때 대체용으로 사용하기도 합니다.

★ CSS Peek

CSS 위치 추적 및 연결 확인에 도움을 줍니다.

디자인 수정할 때 꽤 편합니다.

Ctrl-Semicolon

세미콜론 입력을 빠르게 도와주는 기능입니다.

직접 코드를 많이 작성하는 사람에게 유용합니다.

★ ESLint

ESLint

문법 오류를 자동으로 잡아주는 대표적인 도구입니다.

초보자 실수를 많이 줄여줍니다.

★ Format HTML in PHP

PHP 작업 시 HTML 정렬에 도움을 줍니다.

★ ftp-kr

원격 서버에 접속해서 FTP/SFTP 파일 전송을 도와줍니다.

웹호스팅 작업할 때 자주 사용됩니다.

Gemini Code Assist

Gemini Code Assist

Google 공식 AI 코드 도우미입니다.

VSCode 왼쪽 메뉴바에 연동해서 사용할 수도 있습니다.

★ HTML CSS Support

HTML/CSS 문법 보조 기능입니다.

자동완성 및 문법 도움 기능이 있습니다.

★ HTML to CSS autocompletion

코드를 일부 작성하면 자동 추천 기능을 제공합니다.

검색 자동완성과 비슷한 느낌입니다.

★ JSX HTML Tags

React 개발 시 도움되는 기능입니다.

React 작업 시 많이 사용됩니다.

Korean Language Pack for Visual Studio Code

VSCode 한국어 언어팩입니다.

초보 때는 편할 수 있지만,
장기적으로는 영어 환경에도 익숙해지는 걸 추천합니다.

개발 자료는 해외 자료가 훨씬 많기 때문입니다.

★ Live Server

정말 많이 사용하는 확장 프로그램입니다.

설치 후 오른쪽 하단에 Go Live 버튼이 생성됩니다.

HTML 작업 후 버튼을 누르면 브라우저가 자동 연결되고,
수정사항이 실시간 반영됩니다.

웹개발 초보자에게 거의 필수 수준입니다.

Live Server 사용 예시

          

Markdown Preview Enhanced

Markdown 문서를 미리보기 할 수 있습니다.

블로그 문서 작성할 때도 편리합니다.

★ Path Intellisense

파일 경로 자동완성 기능입니다.

경로 입력 실수를 줄여줍니다.

★ Prettier - Code Formatter

Prettier

코드를 자동으로 정리해주는 도구입니다.

줄 정렬, 들여쓰기, 보기 좋은 형태로 자동 수정됩니다.

협업에서도 정말 많이 사용됩니다.

★ Python 관련 확장

Python 작업 시 자주 사용됩니다.

대표적으로:

• Python
• Python Debugger
• Python Environments
• Python Indent

등이 있습니다.

바이브코딩으로 자동화나 AI 연동 작업할 때도 많이 사용됩니다.

Remote-SSH

원격 서버 접속 기능입니다.

WSL이나 리눅스 서버 연결 시 자주 사용됩니다.

원격 작업하는 사람에게 거의 필수입니다.

SVG / SVG Editor

SVG 이미지를 미리 보거나 편집할 수 있습니다.

웹 작업 시 꽤 유용합니다.

꼭 다 설치해야 할까?

아닙니다.

처음부터 너무 많이 설치하면 오히려 더 헷갈릴 수 있습니다.

개인적으로 초보자 기준 추천은:

• Live Server
• Prettier
• ESLint
• Auto Rename Tag
• Path Intellisense
• GitHub Copilot

정도부터 시작하는 걸 추천합니다.

그리고 작업하다 불편한 게 생기면
그때 필요한 확장 프로그램을 추가하는 방식이 가장 편했습니다.

처음 VSCode를 열었을 때는
“이걸 언제 다 익히지?” 싶었습니다.

그런데 막상 개발 공부를 하다 보면 자주 쓰는 기능은 자연스럽게 반복하게 되고,
반복하다 보면 익숙해집니다.

처음부터 모든 기능을 외우려 하기보다:

• 파일 열기
• Live Server 실행
• 확장 프로그램 설치
• Git 연결

정도만 익혀도 충분히 개발 공부를 시작할 수 있습니다.

특히 바이브코딩 방식으로 공부한다면
“완벽하게 아는 것”보다 “계속 만들어보는 것”이 더 중요한 것 같습니다.

 

파이썬이란? 비전공자도 이해한 Python 기초 개념 정리

개발 공부를 시작하면 정말 자주 보게 되는 언어가 있다.
바로 Python(파이썬)이다.

처음에는:

• 왜 이렇게 많이 사용하는지

• 다른 언어와 뭐가 다른지

• 왜 입문자 추천 언어인지

잘 몰랐다.

그런데 공부를 조금 진행하면서 느낀 건
“진입장벽이 낮고 결과를 빨리 볼 수 있는 언어”라는 점이었다.

특히:

• 자동화

• 웹개발

• 데이터분석

• AI

• 앱개발 보조도구

등 정말 다양한 곳에서 사용되고 있었다.

이번 글에서는 비전공자 입장에서 이해했던 방식으로
“파이썬이 정확히 어떤 언어인지” 정리해보려고 한다.

파이썬(Python)은 어떤 언어인가?

Python 은 사람이 읽기 쉬운 문법을 가진 프로그래밍 언어다.

쉽게 말하면:
“컴퓨터에게 일을 시키기 위한 언어”

라고 생각하면 된다.

예를 들어:

• 계산하기

• 파일 정리하기

• 웹사이트 만들기

• 자동 클릭 프로그램 만들기

• AI 실행하기

같은 작업을 코드로 작성할 수 있다.

특히 다른 언어들보다:

• 문법이 간단하고

• 읽기 쉽고

• 초보자가 접근하기 쉬운 편

이라서 입문용으로 정말 많이 추천된다.

왜 입문 언어로 많이 추천될까?

개발 입문자들이 처음 배우는 언어는 보통:

• Python

• JavaScript

• Java

정도가 자주 언급된다.

그중 Python은:
“코드가 사람 말처럼 읽힌다”
라는 느낌이 강했다.

예를 들면:

print("안녕하세요")

이 코드의 의미는:
“안녕하세요를 출력해라”

거의 그대로다.

처음 봤을 때:
“생각보다 안 무섭다”
라는 느낌이 들었다.

다른 언어는 처음부터:

• 세미콜론

• 자료형 선언

• 복잡한 구조

같은 부분에서 막히는 경우가 많은데
Python은 비교적 빠르게 결과를 볼 수 있었다.

파이썬으로 할 수 있는 것들

생각보다 활용 범위가 엄청 넓었다.

1. 자동화 프로그램 제작

반복 작업 자동화가 가능하다.

예를 들면:

• 파일 이름 변경

• 엑셀 정리

• 반복 클릭

• 데이터 수집

같은 작업을 자동으로 처리할 수 있다.

이런 걸 처음 보면:
“이게 진짜 가능하네?”
싶다.

2. 웹 개발

Python으로 웹사이트 백엔드도 만들 수 있다.

대표적으로:

• Django

• Flask

• FastAPI

같은 프레임워크가 있다.

특히 최근에는 AI 서비스 백엔드에서도 많이 사용된다고 한다.

3. AI와 머신러닝

요즘 Python이 가장 많이 언급되는 이유 중 하나.

AI 관련 라이브러리들이 대부분 Python 기반이다.

예를 들면:

• TensorFlow

• PyTorch

• OpenCV

같은 것들.

그래서 AI 공부를 하려면 Python을 거의 필수처럼 배우게 된다고 한다.

4. 데이터 분석

데이터를:

• 정리하고

• 분석하고

• 시각화하는 작업

에도 Python이 많이 사용된다.

특히:

• pandas

• matplotlib

같은 라이브러리가 유명했다.

처음에는 이름이 어려웠는데
나중에는 익숙해진다.

Python의 가장 큰 장점

내 기준 가장 크게 느낀 장점은:

“결과를 빨리 볼 수 있다”

는 점이었다.

예를 들어:

name = "홍길동"
print(name)

바로 결과가 출력된다.

초보자는:
“내 코드가 실제로 동작했다”
라는 경험이 엄청 중요하다고 느꼈다.

이런 작은 성공 경험이 계속 이어진다.

반대로 단점도 있다

장점만 있는 건 아니었다.

실행 속도

C언어나 C++ 같은 언어보다 느린 편이라고 한다.

그래서:

• 게임 엔진

• 고성능 처리

같은 영역에서는 다른 언어가 더 많이 사용되기도 한다.

들여쓰기 때문에 처음엔 헷갈렸다

Python은 특이하게:
“들여쓰기”가 문법이다.

예를 들면:

if True:
    print("실행")

공백이 틀리면 오류가 난다.

처음에는:
“왜 띄어쓰기 때문에 에러가 나지?”
싶었는데,

오히려 익숙해지면 코드가 깔끔하게 정리되는 느낌도 있었다.

라이브러리라는 개념도 자주 등장했다

Python 공부하다 보면:
“라이브러리 설치”
라는 말을 정말 많이 본다.

쉽게 말하면:
“다른 사람이 미리 만들어둔 기능 모음”

이라고 이해했다.

예를 들어:

pip install requests

처럼 설치하면:
웹 요청 기능을 쉽게 사용할 수 있다.

처음에는:
“왜 내가 다 안 만들고 가져다 쓰지?”
싶었는데,

실무에서는 이런 방식이 훨씬 효율적이라고 한다.

Python 설치 후 가장 먼저 하는 것

보통은:

• Python 설치

• VSCode 설치

• 실행 테스트

순으로 진행한다.

가장 유명한 첫 테스트는 역시:

print("Hello World")

이 코드다.

별거 아닌데
처음 성공하면 은근 기분 좋다.

개발 공부하면서 느낀 점

처음에는:
“개발 언어는 천재들만 하는 거 아닐까?”
라고 생각했다.

근데 실제로는:

• 하나씩 검색하고

• 오류 수정하고

• 조금씩 따라 해보는 과정

의 반복이었다.

특히 Python은:

• 검색 자료 많음

• 예제 많음

• 입문 자료 많음

이라서 독학 진입장벽이 낮은 편이었다.

어떤 사람에게 Python이 잘 맞을까?

개인적으로는 이런 사람들에게 특히 잘 맞는 것 같다.

• 개발 처음 시작하는 사람

• AI 공부 관심 있는 사람

• 자동화 만들고 싶은 사람

• 데이터 분석 해보고 싶은 사람

• 코딩 입문 언어 고민 중인 사람

특히 비전공자 입문용으로는 정말 자주 추천되는 이유가 있었다.

마무리

Python은:
“어렵고 복잡한 개발 언어”
보다는

“생각보다 빨리 결과를 볼 수 있는 언어”
에 가까웠다.

물론 깊게 들어가면 어려운 영역도 많지만
입문 단계에서는:

• 문법이 비교적 단순하고

• 예제가 많고

• 결과를 바로 확인 가능

해서 재미를 붙이기 좋았다.

지금은 간단한 코드만 공부 중이지만
나중에는:

• 자동화 프로그램

• 웹 프로젝트

• AI 연동

같은 것도 직접 만들어보고 싶다.

 

Vercel과 GitHub Pages로 웹사이트 자동 배포해보기 (CI/CD 입문 정리)

웹개발 공부를 하다 보면 “내가 만든 파일을 실제 인터넷 주소로 접속 가능하게 만들고 싶다”라는 순간이 꼭 온다.
처음에는 단순히 HTML 파일만 만들었는데, 나중에는 “수정하면 자동으로 반영되는 구조”까지 경험하게 되는데 이 과정이 바로 CI/CD 흐름의 시작이다.

이번에는 실제로 공부하며 진행했던 내용을 기준으로

• Vercel(버셀) 배포

• GitHub Pages 배포

• GitHub 연동

• 자동 배포 구조

• 배포 후 오류 수정 과정

까지 한 번에 정리해보려고 한다.

처음에는 어렵게 느껴졌는데, 직접 해보니 “깃허브에 올리기만 하면 자동 배포되는 구조”가 생각보다 엄청 편했다.

CI/CD란 무엇인가?

처음에는 이름부터 어려웠다.

CI/CD는 쉽게 말하면:

• 코드 수정

• 깃허브 업로드(push)

• 자동 빌드

• 자동 배포

를 자동으로 처리하는 구조다.

즉 예전처럼:

• 파일 압축

• FTP 접속

• 서버 업로드

같은 작업을 반복하지 않아도 된다.

지금은 HTML/CSS/JS 정도의 정적 프로젝트만 공부 중이지만, 나중에 React나 앱 개발을 할 때도 거의 동일한 흐름으로 사용된다.

관련 기초 내용은 이전에 정리했던
Git과 GitHub 차이 설명 글
이랑 같이 보면 흐름 이해가 더 쉬웠다.

Vercel(버셀)로 무료 배포하기

Vercel 공식 사이트
또는
Netlify 공식 사이트

둘 다 소량의 무료 배포가 가능하다.

이번에는 Vercel 기준으로 진행했다.

1. 회원가입 및 GitHub 연동

Vercel 회원가입 시 이름 작성 후
GitHub 아이디 연동 방식으로 가입을 진행했다.

이 방식의 장점은:

• GitHub 수정 시 자동 반영

• 자동 재배포

• 저장소 연결 자동화

가 가능하다는 점이다.

가입 완료 후 GitHub 연동 팝업이 나오는데
여기서 “GitHub 연동” 버튼을 클릭한다.

그 다음:

• 이메일 인증번호 전송

• 번호 입력

• GitHub 연동 완료

순으로 진행된다.

처음에는 복잡해 보였는데 실제로는 금방 끝났다.

Import Git Repository 화면

GitHub 연동이 끝나면
“Import Git Repository” 리스트 화면이 출력된다.

여기서 내가 GitHub에 업로드했던 프로젝트 리스트를 확인할 수 있었다.

배포할 프로젝트 우측의 “Import” 버튼 클릭.

정적인 HTML 작업만 진행 중이라:

• Framework Preset

• Application Preset

부분은 Other 상태로 두고 진행했다.

그 다음 Deploy 버튼 클릭.

배포 진행 과정 확인

배포를 누르면:

• Build Logs

• Output Logs

• Settings

등 진행 상황을 확인할 수 있다.

현재는 파일 규모가 작아서 거의 바로 완료됐다.

배포 완료 후:

• 내가 작성한 웹사이트 출력

• Continue to Dashboard 클릭

• Overview 페이지 이동

이 상태가 바로:
“실제 인터넷에 배포 완료된 상태”다.

그리고 가장 중요한 부분.

GitHub에서 코드 수정 후 push하면:

• 자동 빌드

• 자동 배포

• 자동 반영

까지 모두 처리된다.

이 구조를 처음 경험했을 때 꽤 신기했다.

배포된 내 사이트 주소 확인

Overview 화면 중앙 상단에 보면:

• Domains  +  버튼

영역이 있다.

여기 표시되는 주소가:
자동 생성된 내 프로젝트 주소다.

예를 들면:

• project-name.vercel.app

형태로 생성된다.

이 주소를 다른 사람에게 공유하면
내가 만든 사이트를 바로 접속 가능하다.

새로운 프로젝트 추가 방법

왼쪽 상단 메뉴 → Projects → Add New Project

로 들어가면 같은 방식으로 새 프로젝트를 추가할 수 있다.

Deployments 메뉴에서는:

• 기존 배포 기록

• 이전 버전

• 재배포 내역

등도 확인 가능하다.

프로젝트를 여러 개 운영할 때 꽤 편리했다.

모바일 청첩장 같은 것도 가능

조금 응용하면:

• 모바일 청첩장

• 포트폴리오

• 소개 페이지

• 링크 모음 사이트

• 간단한 회사 페이지

같은 것도 제작 가능하다.

특히 HTML/CSS만으로도 꽤 예쁘게 만들 수 있었다.

나중에는 React 기반으로도 확장 가능하다고 한다.

Vercel 무료 버전 주의점

무료라고 해서 완전 무제한은 아니다.

사용량 제한이 존재한다.

공부용이나 개인 프로젝트 수준에서는 충분했지만
트래픽이 많아지거나 팀 프로젝트로 가면 유료 플랜이 필요할 수도 있다.

또한 모든 기술이 다 지원되는 건 아니었다.

예를 들어:

• 일부 Python 환경

• PHP 환경

등은 제한이 있거나 설정이 달랐다.

AI에게 물어보면 가끔 틀린 답도 있어서
실제로는 Vercel Import 화면에서:

• Application Preset

• 지원 프레임워크 목록

을 직접 확인하는 게 가장 정확했다.

Vercel에서 어려운 건 Render 사용

Render 공식 사이트

Vercel에서 안 되는 경우에는 Render.com도 많이 사용한다고 한다.

일정량 무료 제공이 가능해서:

• 서버 실행

• 백엔드

• 일부 Python 프로젝트

같은 쪽에서 자주 언급된다.

나중에 Node.js나 백엔드 공부할 때 다시 정리해볼 예정이다.

GitHub Pages 배포도 공부해보기

GitHub Pages 공식 설명

GitHub Pages는 GitHub의 정적 웹사이트 호스팅 기능이다.

즉:
HTML 파일을 GitHub 저장소에 올리고
그걸 그대로 웹사이트로 공개할 수 있다.

GitHub 계정 연동 절차

배포 전에는:

• VSCode

• Git

• GitHub

연동이 먼저 되어 있어야 한다.

관련 내용은 이전에 정리했던
Git 설치 및 GitHub 연결 정리 글
도 같이 보면 흐름 이해가 쉬웠다.

배포 브랜치 설정

GitHub Pages에서는:

• main 브랜치
  또는

• gh-pages 브랜치

를 배포 대상으로 지정 가능하다.

설정 완료 후 몇 분 지나면:

• username.github.io

형태의 주소가 생성된다.

자동 배포 구조 이해하기

실제로 흐름은 다음과 같았다.

코드 수정
→ git add .
→ git commit
→ git push
→ 자동 배포
→ 사이트 반영

한 번 구조를 익히고 나니까
이전처럼 파일을 직접 업로드하는 방식보다 훨씬 편했다.

파일 경로 문제로 가장 많이 헤맸다

배포 후 가장 많이 발생했던 문제는:

• 이미지 안 뜸

• CSS 적용 안 됨

• JS 동작 안 함

이었다.

대부분 원인은 “경로 문제”였다.

예를 들면:

<img src="/images/test.png">

처럼 절대경로를 잘못 쓰면 GitHub Pages에서 깨질 수 있었다.

그래서:

• 상대경로

• 폴더 구조

• 파일명 대소문자

를 꼭 확인해야 했다.

윈도우에서는 안 보이는데
웹 서버에서는 대소문자를 구분해서 오류가 발생하기도 했다.

배포 후 에러 확인 루틴도 중요

배포는 끝이 아니라 시작이었다.

오류가 나면:

• Console 확인

• Network 탭 확인

• Build Logs 확인

하면서 수정해야 했다.

처음에는 에러만 봐도 무서웠는데
지금은:
“아 어디 경로가 틀렸구나”
정도는 조금씩 보이기 시작했다.

이 과정 자체가 공부에 꽤 도움이 됐다.

예전에는:
“웹사이트 배포는 엄청 어려운 영역 아닐까?”
라고 생각했는데,

실제로는:

• GitHub 연동

• 버튼 몇 번 클릭

• 자동 배포 연결

정도만 익혀도 충분히 시작 가능했다.

특히:

• 수정하면 자동 반영되는 구조

• 실제 인터넷 주소 생성

• 내 사이트를 직접 운영하는 경험

이 부분이 꽤 재미있었다.

지금은 단순 HTML 수준이지만
나중에는 React, 앱개발, 백엔드까지 연결하면서
더 큰 프로젝트도 배포해보고 싶다.

Flutter 첫 앱 만들기 (초보도 10분 만에 실행하는 완벽 가이드)

Flutter 개발환경이 아직이라면 먼저 확인하세요

→ Flutter 개발환경 세팅 방법 보기

 

Flutter 첫 앱 만들기를 처음 시도하는 분들을 위해 UI 생성부터 실행까지 단계별로 정리했습니다. 이 글 하나로 Flutter 입문자가 첫 앱을 직접 실행할 수 있습니다.

Flutter 첫 앱, 어디서부터 시작해야 할까?

개발환경 세팅까지 끝냈다면 이제 진짜 앱을 만들어볼 차례입니다.
하지만 처음에는 “뭘 어떻게 만들어야 하지?”라는 생각이 들 수 있습니다.

이 글에서는 초보 기준으로 Flutter 첫 앱을 만드는 과정을 단계별로 정리했습니다.

1. 프로젝트 생성

터미널에서 아래 명령어를 입력

flutter create my_first_app
cd my_first_app

프로젝트가 생성되면 기본 구조가 자동으로 만들어집니다.

2. 기본 구조 이해하기

가장 중요한 파일:

lib/main.dart

이 파일이 앱의 시작점입니다.

3. 첫 UI 만들어보기

아래는 가장 기본적인 Flutter 앱 코드입니다. 이 코드를 통해 앱의 구조를 이해할 수 있습니다.

main.dart를 열고 아래 코드를 확인.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Center(
          child: Text('Hello Flutter!'),
        ),
      ),
    );
  }
}
실행하면 “Hello Flutter!”가 화면에 표시됩니다.

여기까지 했다면 이미 50% 성공입니다!
이제 앱 실행만 하면 실제 화면을 확인할 수 있습니다.



4. 앱 실행하기
터미널에서 실행 : flutter run

초보가 자주 막히는 부분

1. 실행이 안 될 때

• 에뮬레이터 실행 여부 확인
• flutter doctor 체크

2. 코드 수정해도 반영 안됨

👉 단축키:

• Hot Reload: r
• Hot Restart: R

★핵심 정리

• main.dart가 시작점
• UI는 위젯으로 구성
• 실행은 flutter run

이 3가지만 이해하면 첫 단계 성공입니다!!!!

🎯다음 단계

개발환경이 아직이라면
→ Flutter 개발환경 세팅 방법 먼저 보기

기본 개념이 부족하다면
→ IT 용어 정리 글 보기

오류가 발생했다면
→ Flutter 오류 해결 모음 보기

처음에는 단순한 "Hello Flutter" 화면이지만, 이 경험이 개발을 계속하게 만드는 중요한 시작점이 됩니다.

저도 처음에는 설치부터 실행까지 많은 시행착오를 겪었지만, 직접 실행해보는 과정에서 가장 빠르게 성장할 수 있었습니다.

Flutter첫앱, Flutter입문, FlutterUI, 앱개발초보, Flutter튜토리얼, Dart기초, Flutter실습

크롬 확장프로그램 개선기 — 엔터키로 할일 추가하기

할일관리 크롬 확장프로그램을 만들고 나서
나는 자주 사용하는 기능이니까 상단 바에 고정해서 쓰기 시작했다.

처음에는 꽤 만족스러웠다.

• 클릭 한 번으로 열림
• 빠르게 할일 추가 가능

“오… 이거 꽤 편한데?”

하지만 곧 불편함 발견

잠깐 써보니 바로 불편한 점이 하나 보였다.

 “할일 추가할 때마다 마우스를 클릭해야 한다”

이게 생각보다 번거롭다.

그래서 자연스럽게 이런 생각이 들었다.

“엔터키로 추가되면 훨씬 편하지 않을까?”

어디를 수정해야 할까?

이건 단순 UI 문제가 아니라
사용자 입력 처리 방식 문제다.

그래서 파일 역할을 다시 정리해봤다.

• HTML → 구조 (뼈대)
• CSS → 디자인
• JS → 동작 (이벤트 처리)

결론: JavaScript를 수정해야 한다

기존 할일 추가 코드

현재 할일 추가는 버튼 클릭으로만 동작한다.

// 할일 추가

document.getElementById('add-btn').addEventListener('click', () => {

  const input = document.getElementById('todo-input');

  const text = input.value.trim();

  if (!text) return;

  chrome.storage.local.get(['todos'], (result) => {

    const todos = result.todos || [];

    todos.push({ id: Date.now(), text, done: false });

    saveTodos(todos);

    renderTodos(todos);

  });

  input.value = '';

});

즉, 버튼 클릭 이벤트에만 연결되어 있음

해결 방법

핵심 아이디어는 간단하다.

엔터키 입력 시 버튼 클릭을 대신 실행시키기

추가 코드 (핵심!)

아래 코드를 기존 코드 바로 아래에 추가해주면 된다.

// 엔터키로 할일 추가

document.getElementById('todo-input').addEventListener('keydown', (e) => {

  if (e.key === 'Enter') {

    document.getElementById('add-btn').click();

  }

});

※ 스크립트 중간에 // 할일추가 ~});   |요사이에 넣어요|  //화면렌더링        

테스트

이제 상단 바에 있는 확장프로그램을 열고

1. 할일 입력
2. Enter 키 입력

버튼 클릭 없이 바로 추가됨 😻

정리

• 불편함: 버튼 클릭이 번거로움
• 해결: Enter 키 이벤트 추가
• 핵심: keydown + Enter 감지
• 결과: UX 개선 완료

 

크롬 확장프로그램 아이콘 추가하기 (할일관리 앱)

크롬 확장프로그램을 만들다 보면
기능은 완성됐는데… 뭔가 허전한 느낌이 들 때가 있다.

바로 아이콘이 없을 때다.

이번 글에서는
할일 관리(To-Do) 크롬 확장 프로그램에 아이콘 추가하는 방법을
초보자도 따라할 수 있게 정리해보겠다.

아이콘이 필요한 이유

아이콘은 단순한 장식이 아니라,

• 크롬 툴바에서 식별 가능
• 확장 프로그램 관리 페이지에서 구분
• 웹스토어 등록 시 필수 요소

즉, 완성도를 높이는 핵심 요소다.

아이콘 사이즈별 용도

크롬 확장프로그램은 3가지 크기의 아이콘을 요구한다.

파일명	크기	사용 위치
icon16.png	16×16	브라우저 탭, 파비콘
icon48.png	48×48	확장 프로그램 관리 페이지
icon128.png	128×128	크롬 웹스토어

3개 모두 준비하는 게 중요하다.

아이콘 만드는 방법 (3가지)

방법 1 — favicon.io (추천★)

가장 쉽고 빠른 방법이다.

1. favicon.io 접속
2. 이모지 검색 (예: 📝, ✅)
3. 다운로드
4. 압축 해제 후 PNG 파일 사용

초보자에게 가장 추천

방법 2 — icons8 (고퀄리티)

좀 더 깔끔한 디자인을 원한다면

1. icons8 접속
2. "todo", "checklist" 검색
3. PNG 다운로드 (16 / 48 / 128)

방법 3 — 코드로 자동 생성

Node.js를 사용하면 아이콘을 자동으로 만들 수도 있다.

※Node.js란?

브라우저 밖에서 JavaScript를 실행할 수 있게 해주는 런타임 환경이에요. Chrome 확장 개발과는 별개로, PC에 따로 설치해야 node 명령어를 쓸 수 있어요.

설치 방법

1. nodejs.org 접속

2. LTS 버전 다운로드 및 설치 (왼쪽 버튼 권장)

3. 설치 확인

--------------------

// generate-icons.js

const { createCanvas } = require('canvas');

const fs = require('fs');

function createIcon(size) {

  const canvas = createCanvas(size, size);

  const ctx = canvas.getContext('2d');

  // 배경

  ctx.fillStyle = '#4a6fa5';

  ctx.beginPath();

  ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2);

  ctx.fill();

  // 체크 이모지

  ctx.font = `${size * 0.6}px serif`;

  ctx.textAlign = 'center';

  ctx.textBaseline = 'middle';

  ctx.fillText('✅', size/2, size/2);

  fs.writeFileSync(`icons/icon${size}.png`, canvas.toBuffer('image/png'));

}

fs.mkdirSync('icons', { recursive: true });

[16, 48, 128].forEach(createIcon);

실행 방법 :

npm install canvas

node generate-icons.js

자동으로 icons 폴더 + PNG 생성됨

다만, 초보라면... 권장하지않는다 합니다. 그래서 저도 이미지 다운받았습니다.

폴더 구조 확인

아이콘을 넣을 위치는 반드시 아래와 같아야 한다.

todo-extension/

├── manifest.json

├── popup.html

├── popup.js

├── popup.css

├── background.js

└── icons/

    ├── icon16.png

    ├── icon48.png

    └── icon128.png

manifest.json 설정

아이콘을 추가하려면
manifest.json에 반드시 코드 추가해야 한다.

🔹 기존 상태

{

  "action": {

    "default_popup": "popup.html"

  }

}

🔹 아이콘 추가 후

{

  "action": {

    "default_popup": "popup.html",

    "default_icon": {

      "16": "icons/icon16.png",

      "48": "icons/icon48.png",

      "128": "icons/icon128.png"

    }

  },

  "icons": {

    "16": "icons/icon16.png",

    "48": "icons/icon48.png",

    "128": "icons/icon128.png"

  }

}

핵심 포인트

• default_icon → 크롬 툴바 아이콘
• icons → 관리 페이지 & 웹스토어

둘 다 반드시 추가해야 완성

적용 방법

1. icons 폴더 생성
2. PNG 파일 3개 넣기
3. manifest.json 수정
4. chrome://extensions 접속
5. 🔄 새로고침 클릭

 바로 적용된다. 

4번 동작 없이 최종화면인 할일목록 앱을 새로고침해바야 안봐뀝니다.

꼭 4번 접속하여 관리자 모드에서 새로고침 해서 적용 후 실제로 적용됬는지 보셔야 합니다.

꿀팁 (개발 중이라면)

아이콘이 아직 준비 안 됐다면?

그냥 빼도 된다

"action": {
  "default_popup": "popup.html"
}

크롬 기본 아이콘으로 정상 동작한다.

아이콘 하나 추가했을 뿐인데 확장프로그램의 완성도가 확 올라간다.

특히 나중에 크롬 웹스토어 배포할 생각이라면  아이콘은 필수다.

(추가한 아이콘은 실제 작성 & 리스트 화면이 아니라,

크롬 상단 확장프로그램 리스트 보여주는 곳이라던가, 관리페이지, 배포 후 스토어 등록시 보여진다. 

실제 작성하는 화면에서 안보인다고 헤매지 말자, 헤멘 1인 올림 😂)

크롬 확장 프로그램 만들기 (초보도 가능한 To-Do 앱)

 크롬 확장 프로그램, 생각보다 어렵지 않습니다.

이번 글에서는 완전 초보도 따라 할 수 있게
간단한 할일 관리(To-Do) 크롬 확장 프로그램을 직접 만들어봅니다.

 HTML / CSS / JavaScript만 알면 충분합니다.

이번 글을 따라 하면 아래 기능을 가진 확장을 만들게 됩니다.

• ✅ 할일 추가
• ✅ 체크(완료 처리)
• ✅ 삭제 기능
• ✅ 브라우저에 자동 저장 (새로고침해도 유지)

즉, “진짜 쓸 수 있는” 미니 앱입니다.

1. 프로젝트 구조 만들기

먼저 폴더부터 만들어줍니다.

todo-extension/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css

파일 역할

• manifest.json → 확장 프로그램의 설정 파일 (필수)
• popup.html → 사용자에게 보이는 UI
• popup.js → 기능 로직 담당
• popup.css → 디자인

2. 개발 환경 준비

1. VSCode 실행
2. 폴더 생성 → todo-extension
3. 파일 3개 생성

• manifest.json
• popup.html
• popup.js

여기까지 하면 준비 끝!

3. manifest.json 작성 (핵심 설정)

{
  "manifest_version": 3,
  "name": "할일 관리",
  "version": "1.0",
  "description": "간편한 할일 관리 확장 프로그램",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage"]
}

핵심 포인트

• "manifest_version": 3 → 최신 크롬 확장 규격
• "storage" → 데이터 저장을 위해 필요
• "default_popup" → 우리가 만든 화면 연결

4. popup.html 작성 (UI)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>📝 할일 목록</h1>

  <input type="text" id="todo-input" placeholder="할일 입력">
  <button id="add-btn">추가</button>

  <ul id="todo-list"></ul>

  <script src="popup.js"></script>
</body>
</html>

구조는 단순합니다

• input → 할일 입력
• button → 추가
• ul → 리스트 출력

5. popup.js 작성 (핵심 로직)

데이터 불러오기

function loadTodos() {
  chrome.storage.local.get(['todos'], (result) => {
    const todos = result.todos || [];
    renderTodos(todos);
  });
}

설명

• 크롬 내부 저장소에서 데이터 가져오기
• 없으면 빈 배열 사용

데이터 저장

function saveTodos(todos) {
  chrome.storage.local.set({ todos });
}

브라우저에 데이터 저장
새로고침해도 유지됨

할일 추가

document.getElementById('add-btn').addEventListener('click', () => {
  const input = document.getElementById('todo-input');
  const text = input.value.trim();
  if (!text) return;

  chrome.storage.local.get(['todos'], (result) => {
    const todos = result.todos || [];
    todos.push({ id: Date.now(), text, done: false });
    saveTodos(todos);
    renderTodos(todos);
  });

  input.value = '';
});

핵심 흐름

• 입력값 가져오기
• 배열에 추가
• 저장
• 다시 렌더링

 화면 렌더링 + 기능

function renderTodos(todos) {
  const list = document.getElementById('todo-list');
  list.innerHTML = '';

  todos.forEach(todo => {
    const li = document.createElement('li');

    li.innerHTML = `
      <input type="checkbox" ${todo.done ? 'checked' : ''}>
      <span>${todo.text}</span>
      <button class="delete">삭제</button>
    `;

    // 체크 기능
    li.querySelector('input').addEventListener('change', () => {
      todo.done = !todo.done;
      saveTodos(todos);
      renderTodos(todos);
    });

    // 삭제 기능
    li.querySelector('.delete').addEventListener('click', () => {
      const updated = todos.filter(t => t.id !== todo.id);
      saveTodos(updated);
      renderTodos(updated);
    });

    list.appendChild(li);
  });
}

loadTodos();

여기서 중요한 개념

• 상태 변경 → 다시 렌더링
• filter → 삭제 구현
• checkbox → 완료 상태 관리

중간 설명 제외 코드만 전체 복사 해서 이어서 작성하면 됩니다!

이해를 위해 중간중간 분류했을 뿐 입니다.

6. 크롬에 설치하기

1. 크롬 주소창에 입력

chrome://extensions

2. 우측 상단 개발자 모드 ON
3. 압축해제된 확장 프로그램 로드
4. todo-extension 폴더 선택

끝!
크롬 상단 아이콘(구글앱 점9개버튼) 에서 하단에 추가된 <할 일 목록> 클릭하면 실행됨

위 확장프로그램은 내 컴퓨터에서만 동작하는! 나만의 앱 입니다.

이번 글에서는

크롬 확장 프로그램을 처음부터 끝까지 직접 만들어봤습니다.

처음에는 단순한 To-Do지만

조금만 확장하면 진짜 서비스 수준까지 발전 가능합니다.

feat.주저리) 💬

지금 보시는 분들 위에 항목 어렵지 않아요, 바로 해보세요. 진짜 뿌듯함이 억만배!!!!!! 자신감 뿜뿜!!!!

언어 공부하다 추락한 내 자존감, 자신감 10000% 복구 가능합니다 🤣

크롬 확장 프로그램 만들기, Chrome Extension 개발,자바스크립트 프로젝트, ToDo 앱 만들기, 웹개발 입문

 

Dart 기초 문법 정리 (보면서 바로 공부하는 입문 가이드)

Flutter를 시작하려면 반드시 배우게 되는 언어  Dart
처음 보는 사람도 따라오면서 공부할 수 있게 실습 느낌으로 정리했다.

★★★복사해서 직접 실행해보는 걸 추천!★★★

Dart란?

Dart 는
Google 이 만든 프로그래밍 언어로, 주로 Flutter 앱 개발에 사용된다.

1. 기본 구조

void main() {
  print("Hello Dart!");
}

main() 함수 = 프로그램 시작 지점
print() = 출력

2. 변수 선언

void main() {
  String name = "홍길동";
  int age = 20;
  double height = 175.5;
  bool isStudent = true;

  print(name);
}

주요 타입

• String -> 문자열

• int -> 정수

• double -> 실수

• bool -> 참/거짓

 var 키워드 (자동 타입)

var name = "홍길동";

Dart가 알아서 타입을 추론

3. 조건문 (if)

void main() {
  int score = 85;

  if (score >= 90) {
    print("A");
  } else if (score >= 80) {
    print("B");
  } else {
    print("C");
  }
}

조건에 따라 다른 결과 실행

4. 반복문 (for)

void main() {
  for (int i = 0; i < 5; i++) {
    print(i);
  }
}

0부터 4까지 출력

5. 리스트 (List)

void main() {
  List<String> fruits = ["사과", "바나나", "포도"];

  print(fruits[0]); // 사과
}

여러 데이터를 저장하는 배열

---

6. Map (딕셔너리)

void main() {
  Map<String, String> user = {
    "name": "홍길동",
    "email": "test@test.com"
  };

  print(user["name"]);
}

key-value 형태 데이터

7. 함수 만들기

void greet(String name) {
  print("안녕하세요 $name");
}

void main() {
  greet("홍길동");
}

 재사용 가능한 코드 블록

8. 반환값 있는 함수

int add(int a, int b) {
  return a + b;
}

void main() {
  print(add(3, 5));
}

9. 클래스 (기초)

class Person {
  String name;
  int age;

  Person(this.name, this.age);

  void introduce() {
    print("저는 $name이고 $age살입니다");
  }
}

void main() {
  var p = Person("홍길동", 20);
  p.introduce();
}

객체지향의 시작

10. null 안전성 (중요 ★)

String? name = null;

? = null 허용

String name = "홍길동"; // null 불가

Dart는 null 안전성을 중요하게 다룸

직접 해보기 (연습 문제)

아래 코드를 직접 만들어보자

문제 1)

• 이름과 나이를 변수로 선언

• 출력하기

문제 2)

• 점수 입력

• A/B/C 출력

문제 3)

• 숫자 1~10까지 출력

★이 3개만 직접 해보면 기초 문법 70% 이해한 것

공부 순서 추천

1. 변수

2. 조건문

3. 반복문

4. 함수

5. 리스트 / Map

6. 클래스

이 순서대로 반복

꿀팁

“읽기만 하면 절대 안 는다”

• 꼭 직접 타이핑

• 에러 일부러 내보기

• 수정해보기

한 줄 정리

Dart는 Flutter 앱 개발을 위한 쉽고 강력한 언어다

다음 단계 추천

• Flutter UI 기초

• 위젯 개념 이해

• 간단한 앱 만들기

처음엔 낯설지만, JavaScript 해봤다면 금방 익숙해진다.

코드 한 줄씩 직접 쳐보는 게 가장 빠른 공부법이다 

☆☆☆☆☆☆ 연습문제 답안

문제 1)

이름과 나이를 변수로 선언하고 출력

void main() {
  String name = "홍길동";
  int age = 20;

  print("이름: $name");
  print("나이: $age");
}

포인트

• String, int 타입 이해
• $변수 → 문자열 안에서 변수 사용 (문자열 보간)

문제 2)

점수에 따라 A / B / C 출력

void main() {
  int score = 85;

  if (score >= 90) {
    print("A");
  } else if (score >= 80) {
    print("B");
  } else {
    print("C");
  }
}

포인트

• if / else if / else 구조
• 조건은 위에서부터 순서대로 검사됨

문제 3)

숫자 1 ~ 10 출력

void main() {
  for (int i = 1; i <= 10; i++) {
    print(i);
  }
}

포인트

• i = 1 → 시작값
• i <= 10 → 조건
• i++ → 1씩 증가

문제 4) 추가 응용 문제 해봅시다.

짝수만 출력하기

void main() {
  for (int i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      print(i);
    }
  }
}

포인트

• % → 나머지 연산
• i % 2 == 0 → 짝수

진짜 중요한 팁

여기서 실력 갈리는 포인트

❌ 그냥 읽기

✅ 직접 타이핑 + 수정

예를 들어:

• 1~20 출력으로 바꿔보기
• 홀수만 출력해보기
• 점수 기준 바꿔보기

한 줄 정리

코드는 “보는 공부”가 아니라 “치는 공부”다

feat.주저리) 💬

언어라는건, 역시나 너무 어렵습니다.

FLutter 라는걸 하려면 알아야 하는 언어라 하여, 간략하게 공부 할 정보를 찾았고, 이래저래 해보는데 갑분 문제까지..@ㅡ@... 사실 바로 모르겠었어서 답안지보면서 직접 쳐보고 ㅋ 해보면서도 이게 머지 싶은데.. 일단 이런걸 해보라고 하니.. 무지성으로 도전ing 합니다!