바이브코딩 데이터베이스 구축, PostgreSQL 설치부터 대시보드까지

AI에게 "매출 대시보드 만들어 줘"라고 해도 한 번에 안 되는 경우가 많습니다. 데이터가 어디에 저장되고 화면과 어떻게 이어지는지 모른 채 시키기 때문입니다. 이 글은 Windows PC에서 VS Code, Python, Node.js, Git, PostgreSQL을 차례로 설치하고, Claude Code로 바이브코딩 데이터베이스 구축과 매출 대시보드 연결까지 해 보는 147단계 실습입니다.

바이브코딩 데이터베이스 구축, 손대기 전에 알아 둘 구조

데이터베이스⁠·테이블⁠·API를 엑셀로 바꿔 보면

• 데이터베이스(DB)는 정보를 한곳에 모아 관리하는 공간입니다. 엑셀로 치면 파일 하나입니다.
• 테이블은 그 안의 시트입니다. 회원 정보는 회원 테이블에, 상품 정보는 상품 테이블에 나눠 넣습니다. 행과 열이 있는 모양도 엑셀 시트와 같습니다.
• API는 DB와 화면 사이를 오가는 배달부입니다. 가입할 때 입력한 정보를 회원 테이블에 저장하고, 로그인할 때 아이디⁠·비밀번호가 맞는지 DB에 가서 확인해 오는 일이 API의 몫입니다.
• 프런트엔드는 글꼴, 색, 매출 그래프 모양, 크기와 위치를 정하는 화면 쪽(UI/UX)입니다.
• 뒤에서 쓸 pgAdmin 화면에서는 DB·스키마⁠·테이블이 C드라이브⁠·폴더⁠·파일처럼 한 단계씩 안으로 들어가는 구조로 보입니다.

AI에게 일을 시킬 때도 이 구조를 알면 지시가 정확해집니다. "어느 DB의 어느 테이블에 데이터가 들어 있으니, 이걸 API로 화면에 연결해 줘"처럼 말할 수 있기 때문입니다.

설치하는 도구가 하는 일

• VS Code: 코드를 쓰고 고치는 작업 도구입니다. 무료이고, 확장 기능이 많고, 사용자가 많아 다른 도구로 옮겨도 적응이 쉽습니다. VS Code 안에서 Claude Code를 확장으로 쓸 수 있다는 점이 이 실습에서 가장 중요합니다.
• 터미널: 마우스 대신 글자 명령어로 설치⁠·실행⁠·관리⁠·문제 해결을 시키는 창입니다. 컴퓨터용 리모컨이라고 생각하면 됩니다.
• Python: 데이터를 읽고 정리하는 데 많이 쓰는 언어입니다. AI가 CSV를 DB에 넣는 스크립트를 짤 때 자주 씁니다.
• Node.js: 원래 브라우저 안에서만 돌던 자바스크립트를 내 컴퓨터에서도 실행하게 해 주는 환경입니다.
• npm: Node.js와 함께 깔리는 도구로, 날짜 계산⁠·지도⁠·차트처럼 남이 만든 기능을 가져다 쓰게 해 줍니다.
• Git: 코드를 언제 어떻게 바꿨는지 기록하는 버전 관리 도구입니다. 잘못 고쳤을 때 이전 상태로 되돌릴 수 있습니다.
• PostgreSQL: 이 실습의 중심인 데이터베이스입니다. 무료 오픈소스이고 상업적으로도 쓸 수 있어 실무에서도 널리 쓰입니다.

설치를 하나씩 하는 게 번거롭다면 Docker처럼 환경이 다 갖춰진 작업 공간에서 시작하는 방법도 있습니다. 다만 처음에는 도구를 하나씩 깔며 각각이 무슨 일을 하는지 익히는 편이 나중에 막혔을 때 덜 흔들립니다.

시작 전 준비물과 비용

• Windows PC와 인터넷 연결
• Claude 계정. VS Code 안의 Claude Code를 처음 연결할 때 로그인 화면이 뜰 수 있습니다. Claude Code를 쓰려면 유료 요금제나 API 결제가 필요하니 요금은 Anthropic 공식 안내에서 확인합니다.
• 연습용 매출 CSV 파일. 날짜, 상품, 카테고리, 수량, 단가, 매출 같은 열이 있는 가상 데이터면 충분합니다. 없으면 AI에게 "가상 매출 데이터 720행짜리 CSV를 만들어 줘"라고 요청해 만들어도 됩니다.
• 대시보드 템플릿(선택). 마음에 드는 대시보드 화면 HTML 파일이나 캡처 이미지를 작업 폴더에 넣어 두면 AI가 참고합니다. 없으면 원하는 화면 구성을 글로 설명합니다.
• 비용: VS Code, Python, Node.js, Git, PostgreSQL은 모두 무료입니다.

기존 엑셀 데이터를 쓰려면 먼저 AI에게 "데이터베이스에 등록 가능한 형태로 정리해 줘"라고 시킨 뒤, 엑셀의 "다른 이름으로 저장"에서 형식을 CSV로 바꿉니다. 병합 셀, 색, 합계 줄 같은 서식은 빼고 첫 줄에 열 이름, 그 아래에 데이터만 남깁니다.

따라 하기 147단계

각 단계는 한 동작이고, 바로 아래 "확인" 줄이 그 동작이 잘 됐는지 보는 기준입니다. 설치 화면의 문구는 프로그램 버전에 따라 조금씩 다를 수 있습니다.

1. VS Code 설치

1. 인터넷 브라우저 주소창을 클릭한다.

   • 확인: 주소창에 커서가 깜빡인다.

2. 주소창에 code.visualstudio.com 을 입력한다.

   • 확인: 주소가 입력된다.

3. 엔터를 누른다.

   • 확인: "Download for Windows" 버튼이 보인다.

4. "Download for Windows" 버튼을 클릭한다.

   • 확인: 다운로드가 시작된다.

5. 받아진 설치 파일을 실행한다.

   • 확인: 설치 창이 뜬다.

6. 사용권 계약에 동의하는 항목을 선택한다.

   • 확인: "다음" 버튼이 눌린다.

7. "다음"을 누른다.

   • 확인: "추가 작업 선택" 화면이 나온다.

8. 추가 작업 선택 화면에서 "'Code(으)로 열기' 작업 추가" 항목들과 "PATH에 추가"를 체크한다.

   • 확인: 해당 항목에 체크 표시가 있다. PATH에 추가가 켜져 있어야 터미널에서 code 명령을 쓸 수 있다.

9. "설치"를 누른다.

   • 확인: 설치가 진행된다.

10. 설치가 끝나면 "종료"를 누른다.

    • 확인: 설치 창이 닫힌다.

2. VS Code 한국어 팩 설치

11. VS Code를 실행한다.

    • 확인: VS Code 창이 열린다. 처음엔 어색해도 곧 익숙해진다.

12. 키보드에서 Ctrl + Shift + X를 같이 누른다.

    • 확인: 왼쪽에 확장 화면이 열리고 위쪽에 검색창이 나타난다.

13. 검색창에 Korean Language Pack 을 입력한다.

    • 확인: 검색 결과가 나온다.

14. 엔터를 누른다.

    • 확인: 맨 위에 "Korean Language Pack for Visual Studio Code"가 보인다.

15. 그 항목의 "Install" 버튼을 누른다.

    • 확인: 설치가 끝나면 오른쪽 아래에 "Change Language and Restart" 버튼이 뜬다.

16. "Change Language and Restart" 버튼을 누른다.

    • 확인: VS Code가 다시 시작되고 화면이 한글로 바뀐다.

3. Claude Code 확장 설치

17. Ctrl + Shift + X를 같이 눌러 확장 화면을 연다.

    • 확인: 확장 화면과 검색창이 나타난다.

18. 검색창에 Claude Code 를 입력한다.

    • 확인: 검색 결과 목록이 나온다.

19. 검색 결과에서 Claude Code 확장을 찾는다.

    • 주의: 이름이 비슷한 확장이 여럿 있다. 게시자가 Anthropic으로 된 것을 고른다.
    • 확인: 게시자가 Anthropic인 항목을 골랐다.

20. 설치 버튼을 누른다.

    • 확인: 설치가 진행된다.

21. "게시자 신뢰 및 설치" 같은 버튼이 나오면 누른다.

    • 확인: 설치가 계속 진행된다.

22. 설치 뒤 "Get Started with Claude Code" 같은 안내 화면이 뜨면 "완료"로 넘어간다.

    • 확인: 안내 화면이 닫힌다. 이것으로 Claude Code 설치가 끝난다.
    • 대안: ChatGPT를 쓰는 사람은 게시자가 OpenAI인 Codex 확장을 같은 방식으로 설치하면 된다.

4. Python 설치

23. 인터넷 주소창에 python.org/downloads 를 입력한다.

    • 확인: 다운로드 버튼이 보이는 화면이 열린다.

24. 화면의 최신 Python 버튼을 클릭한다.

    • 확인: 다운로드가 시작된다. 2026년 10월 기준 최신 계열은 3.15다(3.15.0, 2026년 10월 9일 배포).
    • 참고: Windows용 다운로드 화면은 Python install manager(여러 버전을 설치⁠·관리하는 프로그램)를 먼저 보여 준다. 아래 25~28단계는 같은 화면에 있는 Windows installer(64-bit, .exe) 기준이다.

25. 받은 파일을 실행한다.

    • 확인: 설치 화면이 뜬다.

26. 설치 화면 아래쪽의 "Add python.exe to PATH" 항목을 체크한다.

    • 주의: 체크하지 않으면 나중에 터미널에서 python 명령어가 안 먹을 수 있다.
    • 확인: 체크 표시가 있다.

27. "Install Now"를 누른다.

    • 확인: 설치가 진행된다.

28. 설치가 끝나면 "Close"를 누른다.

    • 확인: 설치 창이 닫힌다.

29. VS Code를 다시 연다.

    • 확인: VS Code 창이 열린다.

30. 상단 메뉴에서 "터미널"을 누른다.

    • 확인: 메뉴가 펼쳐진다.

31. "새 터미널"을 누른다.

    • 확인: 아래쪽에 터미널 창이 열린다.

32. 터미널에 아래 명령어를 입력하고 엔터를 누른다. py 다음에 한 칸 띄우고 하이픈 두 개(--)를 붙인다.

py --version

• 확인: Python 3.15.x처럼 버전 숫자가 보이면 잘 설치된 것이다.
• 참고: py는 Windows용 Python 실행 도우미(py 런처) 명령이다. python --version을 쳐도 같은 버전이 나와야 정상이다.

5. Node.js 설치

33. 인터넷 주소창에 nodejs.org 를 입력한다.

    • 확인: Node.js 사이트가 열린다.

34. 왼쪽 상단의 "다운로드" 메뉴를 클릭한다.

    • 확인: 다운로드 화면이 열린다.

35. Windows 설치 프로그램(.msi) 파일을 다운로드한다. 버전은 LTS(장기 지원판)를 고른다.

    • 확인: 파일이 받아진다.

36. 받은 파일을 실행한다.

    • 확인: 웰컴 화면이 나온다.

37. 웰컴 화면에서 "Next"를 누른다.

    • 확인: 라이선스 화면이 나온다.

38. 라이선스 화면에서 동의 항목을 선택한다.

    • 확인: "Next"가 눌린다.

39. "Next"를 누른다.

    • 확인: 설치 폴더 화면이 나온다.

40. 설치 폴더 위치는 그대로 두고 "Next"를 누른다.

    • 확인: 구성 요소(Custom Setup) 화면이 나온다.

41. 구성 요소 화면은 기본으로 선택된 상태 그대로 "Next"를 누른다.

    • 확인: "Tools for Native Modules" 화면이 나온다.

42. "Automatically install the necessary tools" 체크는 하지 않은 상태 그대로 "Next"를 누른다.

    • 확인: 설치 준비 화면이 나온다.
    • 참고: 이 항목은 일부 확장 모듈을 직접 빌드할 때 필요한 도구를 함께 까는 옵션이다. 이 실습에는 필요 없고, 체크하면 설치 시간이 크게 늘어난다.

43. "Install"을 누른다.

    • 확인: 설치가 진행된다.

44. 설치가 끝나면 "Finish"를 누른다.

    • 확인: 설치 창이 닫힌다.

45. VS Code로 돌아가 아래쪽 터미널 창을 클릭한다.

    • 확인: 터미널에 커서가 있다.
    • 주의: Node.js 설치 전부터 열려 있던 터미널은 새 설치를 모를 수 있다. 명령이 안 먹으면 VS Code를 껐다 켠다.

46. 터미널에 Node.js 버전 확인 명령어를 입력하고 엔터를 누른다.

node -v

• 확인: v24.x처럼 v로 시작하는 버전 번호가 뜨면 성공이다. 이어서 npm -v를 치면 npm 버전도 확인할 수 있다.

6. Git 설치

47. 인터넷 주소창에 git-scm.com 을 입력한다.

    • 확인: Git 사이트가 열린다.

48. 엔터를 누른다.

    • 확인: 다운로드 안내 쪽에 "for Windows"가 보인다.

49. "for Windows"를 클릭한다.

    • 확인: 다운로드 안내 화면이 열린다.

50. "Click here to download the latest ..." 문구를 클릭한다.

    • 확인: 설치 파일이 다운로드된다.

51. 받은 실행 파일을 실행한다.

    • 확인: 라이선스 화면이 나온다.

52. 라이선스 화면에서 "Next"를 누른다.

    • 확인: 설치 경로 화면이 나온다.

53. 파일 경로는 그대로 두고 "Next"를 누른다.

    • 확인: "Select Components" 화면이 나온다.

54. Select Components 화면은 기본 체크 상태 그대로 둔다.

    • 확인: 기본 체크 상태가 유지된다.

55. "Next"를 누른다.

    • 확인: 시작 메뉴 폴더 화면이 나온다.

56. 이 화면은 그대로 두고 "Next"를 누른다.

    • 확인: 기본 에디터 선택 화면이 나온다.

57. 기본 에디터 선택 화면의 드롭다운 메뉴를 누른다. 기본값인 Vim은 초보자가 쓰기 어렵다.

    • 확인: 에디터 목록이 펼쳐진다.

58. "Use Visual Studio Code as Git's default editor"를 선택한다.

    • 확인: 드롭다운에 해당 항목이 표시된다.

59. "Next"를 누른다.

    • 확인: 기본 브랜치 이름 화면이 나온다.

60. 기본 브랜치 이름을 "Override the default branch name"으로 바꾸고 main으로 되어 있는지 확인한다.

    • 확인: 기본 브랜치가 main이다. 요즘 GitHub 등 대부분의 서비스가 main을 기본으로 쓴다.

61. "Next"를 누른다.

    • 확인: PATH 환경 설정(Git 사용 위치) 화면이 나온다.

62. "Git from the command line and also from 3rd-party software" 항목이 선택되어 있는지 확인한다.

    • 확인: 해당 항목이 선택되어 있다. 이래야 VS Code 터미널에서 git 명령이 먹는다.

63. "Next"를 누른다.

    • 확인: SSH 실행 파일 화면이 나온다.

64. SSH 화면은 "Use bundled OpenSSH" 기본값 그대로 "Next"를 누른다.

    • 확인: HTTPS 화면이 나온다.

65. HTTPS 화면에서 "Use the OpenSSL library"를 선택한다.

    • 확인: OpenSSL 항목이 선택된다. 초보자는 이 기본값이면 된다.

66. "Next"를 누른다.

    • 확인: 줄바꿈 처리 화면이 나온다.

67. 줄바꿈 화면은 "Checkout Windows-style, commit Unix-style line endings" 기본값 그대로 "Next"를 누른다.

    • 확인: 터미널 에뮬레이터 화면이 나온다.

68. 터미널 화면에서 "Use MinTTY" 쪽이 선택되어 있는지 확인한다.

    • 확인: MinTTY 항목이 선택되어 있다.

69. "Next"를 누른다.

    • 확인: git pull 동작 화면이 나온다.

70. git pull 동작 화면에서 "Rebase"를 선택한다.

    • 확인: Rebase가 선택된다.
    • 참고: 기본값은 "Fast-forward or merge"다. 혼자 쓰는 연습용 저장소라면 어느 쪽을 골라도 크게 문제없다.

71. "Next"를 누른다.

    • 확인: 자격 증명 도우미 화면이 나온다.

72. 자격 증명 화면에서 "Git Credential Manager"가 선택되어 있는지 확인한다.

    • 확인: Git Credential Manager가 선택되어 있다. GitHub 로그인 정보를 안전하게 저장해 주는 도구다.

73. "Next"를 누른다.

    • 확인: 추가 옵션 화면이 나온다.

74. 추가 옵션 화면의 두 항목(파일 시스템 캐싱, 심볼릭 링크)을 모두 체크한다.

    • 확인: 두 항목 모두 체크되어 있다.

75. "Install"을 누른다.

    • 확인: 설치가 진행된다.

76. 설치가 끝나면 "Finish"를 누른다.

    • 확인: 설치 창이 닫힌다.

77. VS Code를 종료한다.

    • 확인: VS Code 창이 닫힌다.

78. VS Code를 다시 실행한다.

    • 확인: VS Code 창이 열린다.

79. 상단 메뉴 "터미널"에서 "새 터미널"을 눌러 터미널을 연다.

    • 확인: 아래쪽에 터미널이 보인다.

80. 터미널에 아래 명령어를 입력하고 엔터를 누른다.

git --version

• 확인: git version 2.으로 시작하는 버전 번호가 보이면 정상 설치다.

7. Git 사용자 정보 등록

Git은 변경 기록마다 누가 바꿨는지 이름과 이메일을 남깁니다. 처음 한 번 등록해 둡니다.

81. 터미널에 아래 명령어를 입력한다. 큰따옴표 안의 이름은 본인이 쓸 이름으로 바꾼다.

git config --global user.name "생존 AI"

• 확인: 입력이 된다.

82. 엔터를 누른다.

    • 확인: 아무 메시지도 안 떠도 정상이다. 설정만 조용히 저장된다.

83. 터미널에 아래 명령어를 입력한다. 큰따옴표 안에는 본인 이메일 주소를 넣는다.

git config --global user.email "본인이메일주소"

• 확인: 입력이 된다.

84. 엔터를 누른다.

    • 확인: 아무 반응이 없어도 정상이다.

85. 터미널에 아래 명령어를 입력하고 엔터를 누른다.

git config --list

• 확인: 방금 입력한 이름(user.name)과 이메일 주소(user.email)가 보이면 정상 설정이다. 목록이 길면 q를 눌러 빠져나온다.
• 참고: 설치 단계마다 ChatGPT·Claude·Gemini 같은 AI에게 "이 작업이 무엇인지, 왜 설치하는지, 어떤 기능이 함께 설치되는지" 한 번씩 물어보고 넘어가면 나중에 막혀도 덜 흔들린다.

8. PostgreSQL 설치

PostgreSQL은 이번 실습의 중심입니다. PostgreSQL 라이선스로 배포되는 오픈소스라 개인⁠·회사 모두 무료로 쓸 수 있습니다. 2026년 10월 기준 최신 정식 버전은 18(18.6, 2026년 8월 배포)이고, 19는 2026년 11월 19일 정식 출시 예정, 14는 2026년 11월 12일에 지원이 끝납니다. 학습용으로는 지원 중인 최신 정식 버전을 고르는 편이 안전합니다.

86. 인터넷 주소창에 postgresql.org/download/windows 를 입력해 접속한다.

    • 확인: "Download the installer" 문구가 보인다.

87. "Download the installer" 문구를 클릭한다.

    • 확인: EDB(PostgreSQL 설치 프로그램을 배포하는 회사)의 설치 파일 목록 화면이 열린다.

88. 표에서 지원 중인 최신 정식 버전(지금은 18.x) 줄의 Windows x86-64 다운로드를 눌러 설치 파일을 받는다.

    • 주의: 이름에 beta나 rc가 붙은 시험판은 고르지 않는다.
    • 확인: 파일이 받아진다.

89. 받은 파일을 실행한다.

    • 확인: 셋업 화면이 나온다.

90. 셋업 화면에서 "Next"를 누른다.

    • 확인: 설치 경로 화면이 나온다.

91. 설치 경로는 그대로 두고 "Next"를 누른다.

    • 확인: 컴포넌트 선택 화면이 나온다. 기본 경로는 C:\Program Files\PostgreSQL\18 형태다.

92. 컴포넌트 선택 화면에서 "Stack Builder"만 체크를 해제한다.

    • 확인: Stack Builder만 체크가 빠지고 PostgreSQL Server, pgAdmin 4, Command Line Tools는 그대로다.
    • 참고: Stack Builder는 추가 도구를 받는 프로그램이라 필요할 때 나중에 따로 설치해도 된다.

93. "Next"를 누른다.

    • 확인: 데이터 디렉터리 화면이 나온다.

94. 데이터 디렉터리는 기본 경로 그대로 두고 "Next"를 누른다.

    • 확인: 비밀번호 설정 화면이 나온다.

95. 관리자 계정(postgres)의 비밀번호를 입력한다. 학습용이라도 값은 각자 정한다.

    • 주의: 이 비밀번호는 125단계에서 Claude가 물어볼 때, 그리고 pgAdmin을 열 때 다시 쓴다. 기억해 둔다.
    • 주의: 실제 업무 데이터를 넣을 DB라면 반드시 길고 복잡한 비밀번호로 정한다.
    • 확인: 비밀번호가 입력된다.

96. "Next"를 누른다.

    • 확인: 포트 설정 화면이 나온다.

97. 포트는 기본값 5432를 그대로 두고 "Next"를 누른다.

    • 확인: 고급 옵션(로케일) 화면이 나온다.

98. 로케일 설정은 기본값 그대로 두고 "Next"를 누른다.

    • 확인: 설치 요약 화면이 나온다.

99. 요약 화면에서 설치 경로와 포트 등을 훑어본다.

    • 확인: 앞에서 지정한 값과 같다.

100. "Next"를 누른다.

     • 확인: 실제 설치가 진행된다.

101. 설치가 끝날 때까지 기다린 뒤 "Finish"를 누른다.

     • 확인: 설치가 끝난다.

9. PostgreSQL 경로(Path) 등록

PostgreSQL을 깔아도 터미널이 psql 명령을 못 찾는 경우가 흔합니다. 실행 파일이 있는 폴더를 Windows가 모르기 때문입니다. 이럴 때 오류 화면을 캡처해 AI에게 물어보면 대부분 "Path 환경 변수에 PostgreSQL 경로를 추가하라"는 답이 나옵니다. 아래가 그 방법입니다.

102. VS Code 터미널에 아래 명령어를 입력하고 엔터를 누른다.

psql --version

• 확인: 이 시점에는 "psql을(를) 찾을 수 없다"는 오류가 날 수 있다. 오류가 나면 103단계로 가고, 버전이 보이면 116단계로 건너뛴다.
• 순서: 8번 구간의 설치를 마친 뒤에 한다.

103. 키보드의 윈도우 키(왼쪽 아래 시작 버튼 모양 키)와 R 키를 같이 누른다.

     • 확인: "실행" 창이 뜬다.

104. 실행 창에 sysdm.cpl 을 입력한다.

     • 확인: 입력이 된다.

105. "확인"을 누른다.

     • 확인: 시스템 속성 창이 열린다.

106. "고급" 탭을 클릭한다.

     • 확인: 아래쪽에 "환경 변수" 버튼이 보인다.

107. "환경 변수"를 클릭한다.

     • 확인: 목록 안에 "Path"라고 적힌 항목이 보인다.

108. 목록에서 "Path" 항목을 선택한다.

     • 확인: Path 줄이 선택 표시된다.

109. "편집"을 누른다.

     • 확인: Path 편집 창이 열린다.

110. "새로 만들기"를 누르고 맨 아래 빈 줄에 PostgreSQL의 bin 폴더 경로를 넣는다. 18 버전을 기본 경로에 깔았다면 C:\Program Files\PostgreSQL\18\bin 이다. 숫자는 설치한 버전 번호로 바꾼다.

     • 확인: 새 줄에 경로가 입력된다. 파일 탐색기에서 이 폴더를 열었을 때 psql.exe가 보이면 맞는 경로다.

111. "확인"을 누른다.

     • 확인: Path 편집 창이 닫힌다.

112. 다시 "확인"을 눌러 환경 변수 창을 닫는다. 시스템 속성 창도 "확인"으로 닫는다.

     • 확인: 환경 변수 창이 닫힌다.

113. VS Code를 완전히 종료한다.

     • 주의: 열려 있던 프로그램은 바뀐 Path를 모른다. 완전히 종료했다가 다시 실행해야 적용된다.
     • 확인: VS Code 창이 모두 닫힌다.

114. VS Code를 다시 연다.

     • 확인: VS Code 창이 열린다.

115. 터미널에 psql --version 을 다시 입력하고 엔터를 누른다.

     • 확인: 이번에는 psql (PostgreSQL) 18.x처럼 버전이 보인다.

10. 데이터 준비와 작업 폴더 열기

116. 연습용 매출 데이터 CSV 파일을 준비한다.

     • 확인: CSV 파일이 PC의 작업 폴더(예: 바탕화면의 "DB 생성" 폴더) 안에 있다.
     • 참고: 엑셀 파일이라면 앞의 "준비물" 설명대로 서식을 빼고 CSV로 저장한다.

117. VS Code를 실행한다.

     • 확인: VS Code 창이 열린다.

118. 좌측 상단의 "파일"을 클릭한다.

     • 확인: 메뉴가 펼쳐지고 "폴더 열기"가 보인다.

119. "폴더 열기"를 클릭한다.

     • 확인: 폴더 선택 창이 열린다.

120. 매출 CSV 파일이 있는 폴더를 선택한다.

     • 확인: 좌측 탐색기에 "DB 생성" 폴더와 그 안의 매출 CSV 파일이 보인다. "이 폴더의 작성자를 신뢰하십니까?" 창이 뜨면 내가 만든 폴더이므로 신뢰를 누른다.

11. Claude Code로 데이터베이스 구축

121. VS Code 우측 상단의 Claude 아이콘을 클릭한다.

     • 확인: 대화창이 나타난다.

122. 처음 연결이면 로그인 페이지가 뜰 수 있다. 뜨면 가입한 Claude 계정으로 로그인한다.

     • 확인: 로그인 후 대화창을 쓸 수 있게 된다.

123. 대화창 아래쪽의 모드 표시를 눌러 파일 수정과 명령 실행을 매번 묻지 않는 자동 모드로 바꾼다. 이름은 버전에 따라 "Edit automatically", "Auto" 등으로 보인다.

     • 확인: 모드 표시가 바뀌었다.
     • 주의: 자동 모드에서는 Claude가 확인 없이 파일을 고치고 명령을 실행한다. 연습용 폴더에서만 쓰고, 중요한 파일이 있는 폴더에서는 묻는 모드로 둔다.

124. 대화창에 아래 같은 명령문(프롬프트)을 입력해 요청한다. 폴더 이름과 CSV 파일 이름은 내 것에 맞게 바꾼다.

이 폴더에 있는 매출 데이터 CSV 파일로 PostgreSQL 데이터베이스를 만들어 줘.
1. 내 컴퓨터의 PostgreSQL(localhost, 포트 5432, 사용자 postgres)에 접속해. 비밀번호는 코드에 직접 적지 말고 나에게 물어본 뒤 .env 파일에 저장하고, .env는 .gitignore에 넣어 줘.
2. sales_db라는 데이터베이스를 만들고, 그 안에 sales 테이블을 만들어 줘. 열 이름과 자료형은 CSV 첫 줄과 값을 보고 정해 줘.
3. CSV의 모든 행을 sales 테이블에 넣어 줘.
4. 다 넣은 뒤 CSV의 행 수와 sales 테이블의 행 수가 같은지 확인하고, 첫 5행과 마지막 5행을 보여 줘.
5. 만든 데이터베이스 이름, 테이블 이름, 열 목록과 자료형을 짧게 보고해 줘.

• 확인: Claude가 계획을 말하고 데이터베이스 구축을 시작한다.
• 참고: 비밀번호를 .env 파일로 따로 두면, 나중에 코드를 GitHub에 올리더라도 비밀번호가 함께 공개되지 않는다.

125. Claude가 비밀번호를 물어보면 PostgreSQL 설치 때 정한 비밀번호를 입력한다.

     • 확인: 비밀번호가 입력된다.

126. 엔터를 누른다.

     • 확인: 작업이 계속 진행되고, 마지막에 CSV와 테이블의 행 수가 같다는 보고가 나온다.

12. pgAdmin에서 데이터 확인

pgAdmin은 PostgreSQL을 설치할 때 함께 깔리는 관리 도구입니다. 데이터가 실제로 들어갔는지 눈으로 확인할 때 씁니다.

127. 윈도우 검색창에 "pgAdmin"을 입력한다.

     • 확인: pgAdmin 4 프로그램이 검색 결과에 나온다.

128. pgAdmin을 실행한다.

     • 확인: pgAdmin이 열린다. 화면이 복잡해 보여도 지금은 왼쪽 목록만 보면 된다.

129. 왼쪽 "Servers" 아래의 서버 항목(기본 이름은 "PostgreSQL 18"처럼 버전 번호가 붙은 이름)을 더블클릭한다.

     • 확인: 비밀번호를 묻는 창이 뜨면 설치 때 정한 비밀번호를 넣는다. 하위 항목이 펼쳐진다.

130. "데이터베이스(Databases)" 항목 안에서 "sales_db"를 찾는다.

     • 확인: 방금 Claude가 만든 DB가 목록에 보인다. 안 보이면 Databases에서 마우스 오른쪽 버튼을 누르고 "새로 고침(Refresh)"을 누른다.

131. "sales_db"를 더블클릭한다.

     • 확인: 하위 항목이 펼쳐진다. 지금은 "스키마"만 보면 된다.

132. "스키마(Schemas)" 항목을 더블클릭하고, 그 아래 "public"을 펼친다.

     • 확인: 아래쪽에 "테이블(Tables)"이 보인다.

133. "테이블"을 클릭한다.

     • 확인: 이번에 넣은 매출 데이터 테이블(sales)이 보인다.

134. "sales" 테이블을 클릭해 선택한다.

     • 확인: 테이블이 선택 표시된다.

135. 마우스 오른쪽 버튼을 클릭한다.

     • 확인: 메뉴가 뜨고 "쿼리 툴(Query Tool)"이 보인다.

136. "쿼리 툴"을 클릭한다.

     • 확인: 명령문을 입력하는 창이 나온다.

137. 쿼리 창에 아래 명령문을 입력한다. 별표(*)는 모든 열을 뜻한다.

SELECT * FROM sales;

• 확인: 입력이 된다.

138. 키보드에서 F5를 누른다.
     • 확인: 등록된 데이터가 전부 나타난다. 행 수와 마지막 행의 값이 원본 CSV와 같으면 성공이다. 실습 예시 데이터에서는 총 720개 행이 나왔고 원본과 일치했다.
     • 참고: SQL은 외울 필요가 없다. AI에게 "전체 데이터 확인하는 쿼리문 만들어 줘", "카테고리별 매출 합계 쿼리 만들어 줘"처럼 물으면 된다.

13. API 연결과 대시보드 만들기

여기서는 프롬프트를 두 번 씁니다. 먼저 Claude에게 지시문을 만들게 하고, 그 지시문을 다시 Claude Code에 넣습니다. 지시문을 AI가 먼저 다듬으면 빠진 조건(검증 순서, 완료 보고 형식 등)이 채워져 결과가 안정적입니다.

139. Claude Code 대화창을 연다.

     • 확인: 대화창이 보인다.

140. 대화창에 아래 요청을 입력해 Claude에게 지시문(프롬프트) 작성을 부탁한다. "비용 대시보드 템플릿"은 작업 폴더에 넣어 둔 참고 파일 이름으로 바꾼다.

현재 PostgreSQL의 sales DB의 sales 테이블에 데이터 적재가 모두 끝난 상태야. 이걸 웹 브라우저와 연결하는 API 작업을 수행하고, 현재 작업 폴더에 있는 비용 대시보드 템플릿을 참고해서 데이터를 연결하고 시각화한 뒤에 동적 애니메이션까지 적용하도록 요청하는 지시문을 만들어 줘.

• 확인: Claude가 지시문을 만들어 준다.

141. 만들어진 지시문을 복사한다.

     • 확인: 클립보드에 지시문이 복사된다.

142. 지시문을 Claude Code 대화창에 붙여 넣는다.

     • 확인: 대화창에 지시문이 들어간다.

143. 지시문을 실행한다.

     • 확인: 사전 파악, 백엔드 API 작업, 연결 검증, 프런트 연결과 시각화, 동적 애니메이션 적용, 완료 보고까지 이어서 진행된다. 한 실습 예에서는 총 25분쯤 걸렸다.

144. 완료 보고에 나온 대시보드 주소를 복사한다. http://localhost: 또는 http://127.0.0.1: 뒤에 포트 번호가 붙은 형태다.

     • 확인: 주소가 복사된다.

145. 웹 브라우저 주소창에 붙여 넣는다.

     • 확인: 주소가 입력된다.

146. 엔터를 누른다.

     • 확인: 대시보드 첫 화면에 숫자와 그래프가 뜨고 애니메이션이 적용된다.

147. 숫자 카드에 마우스를 올려 본다.

     • 확인: 카드가 강조 표시된다. 예시 대시보드에는 전년도 비교 매출 그래프, 평균 단가, 카테고리별 매출 비중, 상위 세그먼트 증감이 나왔다.

대시보드 결과와 다음 단계

처음 나온 대시보드가 완벽하지는 않아도 꽤 쓸 만합니다. 항목별로 한 화면에 모으고, 가장 중요한 숫자(이번 달 매출, 전년 대비 증감)를 위로 올리는 정도만 더 요청하면 실제 보고서로 쓸 수 있는 수준이 됩니다.

다만 이 대시보드 주소는 루프백 주소입니다. localhost나 127.0.0.1은 "이 컴퓨터 자신"을 뜻하는 주소라서 내 컴퓨터에서만 열립니다. 우리 집 안에서만 켜지는 TV와 같습니다. 다른 사람이 보게 하려면 배포가 필요하고, 실제 회사 데이터를 올린다면 그 전에 회원가입⁠·로그인 같은 접근 제한부터 갖춰야 합니다.

바이브코딩 데이터베이스 구축이 막힐 때

터미널에서 python 명령어가 안 먹을 때

설치 첫 화면의 "Add python.exe to PATH"를 체크하지 않았을 가능성이 큽니다. Python 설치 파일을 다시 실행해 "Modify"로 들어가 PATH 추가를 켜거나, 다시 설치하면서 체크합니다. 그다음 VS Code를 껐다 켭니다.

psql --version에서 오류가 날 때

PostgreSQL 실행 파일 경로가 Path 환경 변수에 없어서입니다. 9번 구간대로 C:\Program Files\PostgreSQL\18\bin 같은 경로를 Path에 넣고 VS Code를 완전히 껐다 켭니다. 경로를 넣었는데도 안 되면 VS Code를 껐다 켰는지, 경로의 버전 숫자가 실제 설치 폴더와 같은지부터 봅니다.

git --version이 안 보일 때

Git 설치 뒤에는 VS Code를 한 번 종료했다가 다시 실행하고 확인합니다. 그래도 안 되면 Git 설치 중 62단계의 "Git from the command line and also from 3rd-party software"가 선택됐는지 설치 파일을 다시 실행해 확인합니다.

Claude가 DB에 접속하지 못할 때

PostgreSQL 서비스가 꺼져 있거나 비밀번호가 틀린 경우가 많습니다. 윈도우 검색창에 "서비스"를 쳐서 열고, "postgresql-x64-18" 같은 항목이 "실행 중"인지 봅니다. 꺼져 있으면 마우스 오른쪽 버튼으로 "시작"을 누릅니다.

오류 이유를 모를 때

오류 화면을 캡처하거나 오류 문장을 그대로 복사해 AI에게 물어봅니다. "무엇을 하려다", "어떤 명령에서", "어떤 오류가 났는지" 세 가지를 같이 주면 답이 빨라집니다.

대시보드를 다른 사람이 못 열 때

내 컴퓨터에서만 열리는 루프백 주소라서 그렇습니다. 다른 사람과 보려면 배포가 필요합니다.

다 끝났는지 확인하는 체크리스트

실제로 손이 가는 곳은 네 군데입니다. Python의 PATH 체크, Git의 기본 에디터를 VS Code로 바꾸는 선택, PostgreSQL의 Stack Builder 해제와 포트 5432, 그리고 Path 등록입니다. 아래 항목이 모두 맞으면 끝입니다.

• VS Code가 설치되고 화면이 한글로 바뀌었다
• 게시자가 Anthropic인 Claude Code 확장이 설치되었다
• 터미널에 Python 버전이 보인다
• 터미널에 Node.js 버전이 보인다
• Git 버전이 보이고, git config --list 에 이름과 이메일이 나온다
• psql --version 이 오류 없이 버전을 보여 준다
• pgAdmin에서 SELECT * FROM sales; 결과의 행 수가 원본 CSV와 같다
• 비밀번호가 코드가 아니라 .env 파일에 들어 있다
• 브라우저에서 대시보드 주소가 열리고 그래프가 보인다