누구나 나만의 앱 만들기 시리즈 2탄 (코드 편집 및 저장)

지난 1탄에서는 AI와 대화하며 앱을 기획하고 코드를 생성하는 법을 알아봤습니다. 오늘은 그 금쪽같은 코드를 어디에 담고, 어떻게 다듬어야 하는지 알아보겠습니다. 바로 '코드 에디터'에 관한 이야기입니다.

1. 코드를 편집하는 여러 가지 방법

AI가 준 코드를 저장하고 수정하는 방법은 생각보다 다양합니다.
* 메모장 (Notepad): 가장 단순하지만, 코드의 오타를 잡아주지 못해 추천하지 않습니다.
* 온라인 에디터 (CodePen, JSFiddle): 설치 없이 브라우저에서 바로 코드를 넣고 결과를 볼 수 있어 간단한 테스트용으로 좋습니다.
* 전문 코드 에디터 (VS Code, Sublime Text): 실제 개발자들이 사용하는 도구로, 가장 강력하고 편리합니다.

2. 왜 우리는 'VS Code'를 선택해야 할까?

수많은 도구 중 제가 가장 추천하는 것은 마이크로소프트에서 만든 Visual Studio Code (VS Code) 입니다. 이유는 명확합니다.
* 전 세계 1등 도구: 전 세계 개발자들이 가장 많이 사용하므로, 모르는 게 생겨도 검색하면 바로 답이 나옵니다.
* 완전 무료: 기업에서 사용하든 개인이 사용하든 비용 걱정이 전혀 없습니다.
* 확장성: 스마트폰에 앱을 깔듯, 필요한 기능을 마음껏 추가할 수 있습니다. (예: AI 코딩 비서 설치)
* 강력한 시각화: 코드의 오타나 문법 오류를 예쁜 색깔로 구분해 줘서 초보자도 코드를 읽기 편합니다.

📱 [보너스] "스마트폰 앱스토어에 VS Code가 없다고요?"
노트북 설치를 마치고 "핸드폰에서도 틈틈이 고쳐봐야지!" 하는 마음으로 앱스토어나 플레이스토어에 VS Code를 검색해 보신 분들, 아마 당황하셨을 겁니다. "어라? 가짜 앱들만 있고 공식 앱이 없네?" 맞습니다. 아쉽게도 VS Code는 현재 스마트폰용 공식 설치 앱이 없습니다.
하지만 실망하지 마세요! 언제 어디서나 '힙하게' 코딩을 이어갈 수 있는 치트키가 두 가지나 있거든요.

• 웹 브라우저의 마법 (vscode.dev): 앱을 깔 필요 없이 핸드폰 브라우저(사파리나 크롬) 주소창에 vscode.dev를 입력해 보세요. 노트북에서 보던 그 화면이 마법처럼 폰 안에서 그대로 열립니다! 깃허브(GitHub)와 연결해두면 밖에서도 오타를 잡거나 디자인을 살짝 수정하기에 충분합니다.

visual studio code mobile 브라우저 실행화면

• 태블릿 유저라면 'CodeApp'이나 'Acode': 만약 아이패드나 갤럭시탭 같은 태블릿을 쓰신다면, VS Code와 거의 흡사한 환경을 제공하는 전용 앱(iOS는 CodeApp, 안드로이드는 Acode 등)을 사용해 보세요. 훨씬 쾌적한 코딩 맛을 느낄 수 있습니다.

3. AI가 다 해주는데, 굳이 VS Code가 필요할까요?

*"AI가 코드 수정까지 다 해주는데, 굳이 이런 전문 툴을 배워야 하나요?"*라는 의문이 드실 수 있습니다. 하지만 VS Code를 쓰면 앱의 퀄리티가 달라집니다.
* 세밀한 한 끗 차이: AI에게 일일이 말하기 번거로운 미세한 문구 수정이나 색상 변경을 내가 직접 실시간으로 확인할 수 있습니다.
* 파일 관리의 중심: 나중에 앱 규모가 커져서 파일이 여러 개가 되었을 때, 길을 잃지 않게 도와주는 든든한 지도 역할을 합니다.
* 실시간 미리보기: 코드를 고치는 즉시 내 앱이 어떻게 변하는지 라이브로 확인하며 작업할 수 있습니다.

4. VS Code 설치 및 기본 기능 익히기

어디서 받을 수 있나요?
공식 홈페이지(code.visualstudio.com)에서 본인의 운영체제(Windows/Mac)에 맞춰 다운로드하면 됩니다.
꼭 알아두어야 할 4대 핵심 기능
* 탐색기 (Explorer): 내가 만든 파일들이 한눈에 보입니다.
* 검색 (Search): 수많은 코드 중 내가 바꾸고 싶은 단어를 한 번에 찾아줍니다.
* 확장 프로그램 (Extensions): AI 비서나 한글 팩 등 편리한 도구를 설치하는 곳입니다.
* 터미널 (Terminal): 컴퓨터에게 직접 명령을 내릴 때 사용하며, 나중에 서버에 올릴 때 유용합니다.

마치며

이제 도구는 준비되었습니다. 1탄에서 만든 코드를 VS Code에 넣고 저장하는 것만으로도 여러분은 이미 개발자의 길에 들어선 것입니다. 다음 3탄에서는 이렇게 만든 파일을 세상 밖으로 내보내는 'GitHub(깃허브)' 활용법을 알아보겠습니다.

추가내용

gemini 도움을 받아 코딩을 하고, 혹은 코드를 수정하고 VS code 로 불러와 작업을 할 수도 있지만 VS code 에 Chat GPT 의 Codex 나 Gemini Code Assist 같은 툴 드를 이용하면 대화형으로 바로 코드 수정이 가능하다. 예를들면 지금 내가 오픈한 코드에서 메뉴 색상을 모두 파란색으로 바꾸고 싶어, 코드 수정해줘. 라고 하면 VS code 에서 바로 코드를 수정해 줍니다. 이 기능은 다음에 다시 한번 다루기로 하겠습니다.