당신이 만들려는 것과 비슷한 무언가는, 이미 세상 누군가가 만들어 두었을 가능성이 큽니다. AI는 바로 그 수많은 기존 해법을 학습해 만들어졌습니다. 그래서 AI를 '이미 검증된 좋은 재료(프레임워크)' 쪽으로 안내하면, 아무것도 없는 백지에서 시작하게 두는 것보다 훨씬 튼튼하고 빠른 결과가 나옵니다.
그러려면 최소한의 '구조 감각'이 필요합니다. 코드를 몰라도 됩니다. 집을 짓지 못해도 '기초·벽·지붕'은 구분할 수 있듯이, 앱의 기본 골격만 알면 됩니다.
프론트엔드 · 백엔드 · API
프론트엔드 · 백엔드 · API — 앱의 기본 골격
- 사용자 본다 · 누른다
- 프론트엔드 (겉모습) 화면·버튼·입력 — 식당의 '홀·메뉴판'
- API (주문서) 요청(request)↔응답(response) — 프론트엔드와 백엔드가 대화하는 약속
- 백엔드 (뒤에서 처리) 계산·저장·판단 — 식당의 '주방'
- 데이터베이스 (저장 창고) 글·사진·회원정보를 오래 보관하는 곳
프론트엔드는 손님이 보는 홀, 백엔드는 보이지 않는 주방, API는 그 사이를 오가는 주문서입니다. 데이터를 오래 보관하는 창고가 데이터베이스입니다.
- 프론트엔드(frontend): 사용자가 눈으로 보고 손으로 누르는 부분 — 화면, 버튼, 글자, 입력창. '겉모습'.
- 백엔드(backend): 화면 뒤에서 조용히 계산·저장·판단을 하는 부분. 로그인 확인, 데이터 저장, 요금 계산 등이 여기서 일어납니다. '주방'.
- API(에이피아이): 프론트엔드와 백엔드가 서로 대화하는 약속·통로. '주문서'처럼 '이걸 해 줘' → '결과 여기 있어'를 주고받습니다.
- 데이터베이스(database): 글·사진·회원정보처럼 오래 남겨야 할 것을 보관하는 창고.
| 부분 | 하는 일 | 대표 프레임워크(예시) |
|---|---|---|
| 프론트엔드 | 화면·상호작용 | React, Vue, Svelte 계열 |
| 스타일링 | 예쁘게 꾸미기 | CSS 유틸리티 프레임워크 계열 |
| 백엔드 | 처리·저장·인증 | Node/Express, Django, Rails 계열 |
| 애니메이션·3D | 움직임·입체 효과 | 전용 애니메이션/3D 라이브러리 |
두 가지 방법 — 스택 지정 vs 추천 요청
구조를 다루는 방법은 두 가지입니다. 아는 만큼 직접 정해 주거나, 모르면 AI에게 '가장 알맞은 것을 골라 달라'고 맡기는 것입니다. 둘 다 백지에서 시작하는 것보다 낫습니다.
구조를 다루는 두 갈래
- (a) 스택을 직접 지정: '리액트(React) 프론트엔드 + 간단한 백엔드 + CSS 유틸리티 프레임워크로 스타일링해서 만들어줘.' — 원하는 재료를 콕 집어 줍니다.
- (b) AI에게 추천 요청: '드래그 앤 드롭 기능을 리액트에서 구현하려면 어떤 방식·라이브러리가 가장 좋은지 추천하고, 그걸로 구현해줘.' — 판단을 AI에 맡기되 이유도 함께 묻습니다.
프롬프트 — 특정 기능에 맞는 프레임워크 추천받기
저는 [만드는 것]에 [원하는 기능, 예: 지도 위에 마커 찍기]를 넣고 싶습니다.
이 기능을 구현하는 데 널리 쓰이고 안정적인 프레임워크/라이브러리를 2~3개 추천해 주세요.
각각의 장단점을 한 줄로 알려 주고, 그중 제 상황에 가장 알맞은 것을 하나 골라
그 이유와 함께 실제로 구현해 주세요.AI와 '함께 지으며 배운다'는 마음가짐을 권합니다. 새 프레임워크 이름이 나오면 '이게 뭐고 왜 이걸 골랐어?'라고 되물어 보세요. 코드를 못 짜도, 내가 무엇 위에 서 있는지를 알면 다음 판단이 훨씬 정확해집니다.
유행하는 최신 프레임워크를 무작정 고르지 마세요. 자료가 많고 오래 검증된 '평범하고 인기 있는' 선택이 초보에게는 대개 최선입니다. AI도 그런 것에 관한 학습 데이터가 많아 더 정확하게 도와줍니다.
무엇을(사고), 어디에(구조) 지을지 정했습니다. 하지만 짓다 보면 반드시 무언가 무너집니다. 그래서 다음 레슨은 세 번째 손가락 '체크포인트' — 실수해도 되돌아갈 수 있게 정상 시점을 저장해 두는 버전 관리입니다.