초급 최종 차트 표시까지 거의 다 왔습니다. 마지막은 최종적으로 우리에게 화려한 차트나 테이블로 데이터 값을 보여주는 프론트엔드 순서만 남아 있습니다.

3장의 실전 맛보기 에서 이미 웹페이지를 만들어서 표시한적이 있습니다. 이 웹페이지를 표시하는 여러 코드들의 모임을 프레임워크라고 하는데 다양한 언어기반에 많은 종류가 있습니다.

프론트엔드(Frontend)는 쉽게 말해 손님이 밥을 먹는 ‘식당 홀’이자, 손님을 맞이하는 ‘서빙 직원’입니다. 아무리 주방(백엔드)에서 맛있는 음식(데이터)을 만들어도, 식당 인테리어가 엉망이거나 서빙이 느리면 손님은 다시는 오지 않겠죠? 수익화를 위해서는 손님도 만족시키고, 우리 가게를 구글이나 네이버에 소문내 줄 ‘검색 로봇’도 만족시켜야 합니다.

웹의 3요소 HTML, CSS, JAVASCRIPT

90년대 알파넷으로 시작한 인터넷은 여러 서비스(고퍼, FTP, NNTP,WWW)가 있었지만 넷스케이프로 시작하는 브라우저로 인터넷 정보를 알려주는 WWW가 대세가 되었습니다.

넷스케이프와 마이크로소프트(IE)의 기술 표준전쟁은 개발자들로 하여금 브라우저마다 코드를 따로 짜야하나 라는 큰 고통을 선사하였습니다.

결국에 이 혼란을 잠재우기 위해 W3C(World Wide Web Consortium)라는 국제 기구가 설립되었습니다. 이들은 특정 기업의 기술이 아닌, 보편적이고 효율적인 HTML, CSS를 표준으로 정의했습니다.

그리고 JavaScript의 경우 넷스케이프가 만든 언어였지만, 나중에 ECMAScript라는 이름으로 표준화되면서 모든 브라우저가 지원하는 유일한 프로그래밍 언어가 되었습니다.

결론적으로 현대의 모든 웹서비스는 html, css, javascript로 표시된다는것은 분명한 사실입니다. 파트 1에서 코딩 문법에 대해 몰라도 된다고 했듯이 이 3요소도 바이브코딩을 한다면 알필요는 없지만 각각 어떤 역활인지는 알야야 됩니다.

HTML (HyperText Markup Language)

“웹의 뼈대와 구조”

HTML은 웹 페이지의 가장 기본적인 골격을 만듭니다. 제목, 문단, 이미지, 링크 등 어떤 내용이 어디에 들어갈지를 결정하는 역할을 합니다.

<h1>제목</h1>, <p>본문 내용</p>

CSS (Cascading Style Sheets)

“웹의 스타일과 디자인”

HTML로 만든 뼈대에 옷을 입히고 화장을 하는 과정입니다. 글자의 색상, 폰트, 배경색, 레이아웃(배치) 등을 설정하여 사용자가 보기 좋게 꾸며줍니다. 집으로 치면 ‘인테리어와 도색’에 해당합니다.

color: blue;, font-size: 16px;

JavaScript

“웹의 동적 기능과 상호작용”

웹 페이지가 단순히 보여지는 것을 넘어, 사용자의 클릭에 반응하거나 데이터를 실시간으로 주고받게 만듭니다. 팝업창을 띄우거나, 버튼을 눌렀을 때 색이 변하는 등의 ‘움직임’을 담당합니다. 집으로 치면 ‘전기 시스템과 가전제품’의 작동과 같습니다.

alert('환영합니다!');, button.addEventListener('click', ...)

한눈에 비교하기

요소	역할	비유 (집 짓기)	특징
HTML	구조	벽, 기둥, 지붕	정적임
CSS	디자인	벽지, 페인트, 조명	시각적임
JavaScript	기능	초인종, 자동문, 엘리베이터	동적임

⚙️ 프레임워크: 백지에서 시작하지 마세요 (인테리어 조립 세트)

과거에는 벽돌을 하나하나 쌓아서 식당 인테리어를 했습니다(순수 HTML, CSS). 하지만 요즘은 ‘프레임워크’ 혹은 ‘라이브러리’라고 불리는 미리 만들어진 인테리어 조립 세트를 사용합니다. 대표적으로 세 가지 브랜드가 있습니다.

리액트 (React)

💭 “가장 트렌디하고 부품 호환성이 뛰어난 모듈형 가구”

페이스북(메타)이 만들었으며, 현재 웹 프론트엔드 생태계를 사실상 지배하고 있는 1위 브랜드입니다.

• 컴포넌트(Component) 시스템: 가장 큰 특징은 화면을 ‘컴포넌트’라는 레고 블록 단위로 쪼개서 조립한다는 점입니다. 예를 들어 ‘주문 버튼’ 블록을 하나 잘 만들어두면, 메인 홀이든 주방이든 예약 페이지든 여기저기 복사해서 그대로 끼워 넣을 수 있습니다.

• 방대한 생태계: 전 세계적으로 쓰는 사람이 가장 많다 보니, 다른 사람들이 미리 예쁘게 만들어둔 부품(오픈소스 라이브러리)을 구하기가 아주 쉽습니다. “이런 기능 없나?” 하고 찾아보면 웬만하면 다 있습니다.

• 가상 돔(Virtual DOM): 식당 인테리어를 바꿀 때 가게 문을 닫고 공사하는 게 아니라, 설계도(가상 돔)에서 먼저 변경해 본 뒤 실제로 바뀐 부분만 현실에 쓱싹 교체합니다. 덕분에 화면이 깜빡이지 않고 아주 부드럽고 빠르게 작동합니다.

뷰 (Vue.js)

💭 “초보 사장님도 뚝딱 조립하는 이케아(IKEA) 가구”

에반 유(Evan You)라는 개인 개발자가 시작해 엄청난 인기를 끈 프레임워크로, 리액트의 장점과 앵귤러의 장점을 적절히 섞어 놓았습니다.

• 쉬운 학습 곡선: 리액트가 개발자 특유의 새로운 사고방식(JSX 등)을 요구한다면, 뷰는 기존에 벽돌 쌓기(HTML, CSS)를 해본 사람이라면 아주 직관적이고 친숙하게 느낄 수 있는 구조로 되어 있습니다.

• 친절한 설명서: 공식 문서가 한글 번역이 매우 잘 되어 있고 읽기 쉽습니다. 초보 사장님들이 인테리어를 시작할 때 진입 장벽이 가장 낮습니다.

• 점진적 도입: 처음에는 식당의 아주 작은 부분(예: 테이블 하나)에만 뷰를 적용해 보다가, 나중에 식당 전체로 확장하기가 매우 좋습니다.

앵귤러 (Angular)

💭 “모든 것이 풀옵션으로 갖춰진 대기업 프랜차이즈 매뉴얼”

구글이 주도해서 만든 프레임워크로, 처음부터 끝까지 정해진 규칙대로 움직이는 견고한 시스템입니다.

• 올인원(All-in-one) 패키지: 리액트나 뷰가 ‘인테리어 가구’만 제공하고 배달 시스템이나 창고 관리 도구는 외부에서 알아서 사 와야 한다면, 앵귤러는 프레임워크 안에 필요한 모든 도구가 처음부터 세트로 다 들어있습니다.

• 엄격한 규칙: 자유도가 낮은 대신 규칙이 매우 엄격합니다. 타입스크립트(TypeScript)라는 언어를 필수로 사용해야 합니다.

• 기업용에 적합: 수십 명의 인테리어 업자(개발자)가 투입되는 거대한 식당이나 복잡한 프랜차이즈(엔터프라이즈급 서비스)를 지을 때, 이 엄격한 매뉴얼 덕분에 튼튼하고 통일성 있는 건물을 지을 수 있습니다. 다만 초보자가 처음 매뉴얼을 익히기에는 꽤 무겁고 어렵습니다

📚 SPA와 MPA: 손님에게 메뉴를 보여주는 두 가지 방식

프론트엔드를 대표하는 3가지 브랜드는 일종의 언어 해석기 입니다. 근본적으로 웹페이지는 HTML, CSS, JavaScript만으로 모든 내용이 표시 되게 설계 되어 있습니다. 그리고 이러한 언어 해석기는 해석방식에 있어 각기 다른 방식을 취하고 있습니다. 그것을 우리는 SPA와 MPA라고 합니다.

MPA (전통 식당 방식)

손님이 메뉴를 클릭할 때마다 아예 새로운 방으로 이동해서 상을 새로 차려주는 방식입니다.

• 장점: 방마다 문패(고유 주소)가 확실해서 구글의 검색 로봇이 찾아오기 쉽습니다 (검색 노출 즉, SEO에 매우 유리함).

• 단점: 매번 방을 옮겨야 하니 화면이 깜빡거리고 속도가 답답하게 느껴집니다.

SPA (최신 앱 방식)

손님은 한 자리에 가만히 앉아 있고, 직원이 메뉴판의 내용만 눈 깜짝할 새 부드럽게 바꿔주는 방식입니다 (React, Vue의 기본 방식).

• 장점: 화면 깜빡임이 없어 스마트폰 앱처럼 부드럽고 쾌적합니다.

• 단점: 처음에 전체 메뉴판을 다 가져오느라 로딩이 조금 길 수 있고, 결정적으로 구글 검색 로봇이 처음엔 빈 식당인 줄 알고 휙 지나가 버릴 수 있습니다 (검색 노출에 치명적).

🛠️ 부수적인 도구들: 최대한 가볍고 단순하게

바이브 코딩을 할 때는 구조가 복잡할수록 AI가 헷갈려서 에러를 냅니다. 그래서 우리는 가장 직관적이고 쉬운 도구들을 AI에게 쓰라고 지시해야 합니다.

상태 관리 (Zustand)

손님이 다크모드(어두운 테마)를 눌렀는지, 팝업창을 닫았는지 ‘기억해 두는 메모장’입니다. 예전에는 리덕스(Redux)라는 아주 복잡한 메모장을 썼고, 리코일(Recoil)이라는 도구는 업데이트가 멈춰버렸습니다. 그래서 요새는 가장 단순하고 가벼운 Zustand(쥬스탠드)라는 도구가 대세입니다.

스타일링 (Tailwind CSS)

식당 벽에 페인트칠을 할 때 복잡하게 도면(CSS 파일)을 따로 그리지 않고, 벽돌에 바로 “빨간색, 둥글게”라고 이름표(클래스명)만 붙이면 디자인이 완성되는 아주 직관적인 인테리어 도구입니다.

🪄 우리의 선택: 퓨전 식당 ‘Next.js’

우리가 만드는 서비스(firemarkets.net)는 결국 광고를 달아 ‘수익’을 내야 합니다. 그러려면 구글 검색 결과 맨 위에 떠야만 합니다(SEO 최적화).

그래서 우리는 Next.js라는 도구를 선택합니다. Next.js는 MPA와 SPA의 장점만 섞은 ‘하이브리드(퓨전)’ 방식입니다.

• 검색 로봇이 올 때: 미리 완벽하게 차려진 밥상(완성된 HTML 화면)을 보여줘서 검색 순위를 팍팍 올려줍니다.

• 실제 손님이 이용할 때: 일단 식당에 들어오면 그 다음부터는 SPA처럼 화면 깜빡임 없이 부드럽게 서비스를 제공합니다.

🤖 실전! 프론트엔드 프롬프트(명령어) 예시

3장의 실전 보기에 만든 웹페이지에 현재 만든 디비의 테이타를 차트로 표시하겠습니다. 차트는 웹페이지에서 제공하는 라인 차트(Line Chart)를 사용하겠습니다.

✨ 사용자의 의도(Vibe)

“프론트엔드(frontend)의 사이드메뉴 “Charts/Line Chart”가 BTC(BTCUSDT, asset_id=2)그래프가 표시되도록 해줘”

💻 AI가 생성한 코드 (Syntax)

frontend/src/app/(admin)/(others-pages)/(chart)/line-chart/page.tsx

import LineChartOne from "@/components/charts/line/LineChartOne";import ComponentCard from "@/components/common/ComponentCard";import PageBreadcrumb from "@/components/common/PageBreadCrumb";import { Metadata } from "next";import React from "react";export const metadata: Metadata = {  title: "Next.js Line Chart | TailAdmin - Next.js Dashboard Template",  description:    "This is Next.js Line Chart page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",};export default
function LineChart() {
return (    <div>      <PageBreadcrumb pageTitle="Line Chart" />      <div className="space-y-6">        <ComponentCard title="Line Chart 1">          <LineChartOne />        </ComponentCard>      </div>    </div>  );}

frontend/src/components/charts/line/LineChartOne.tsx

"use client";import React, { useEffect, useState } from "react";import { ApexOptions } from "apexcharts";import dynamic from "next/dynamic";// Dynamically import the ReactApexChart componentconst ReactApexChart = dynamic(() => import("react-apexcharts"), {  ssr: false,});export default
function LineChartOne() {  const [chartData, setChartData] = useState<{ x: string; y: number }[]>([]);  const [isLoading, setIsLoading] = useState(true);  useEffect(() => {    const fetchData = async () => {      try {        // Fetch BTCUSDT (asset_id = 2) data from the backend        const response = await fetch("http://localhost:8000/ohlcv/2?limit=365");        if (!response.ok) {          throw new Error("Failed to fetch data");        }        const data = await response.json();        // Transform the data for the chart (x: Date, y: price)        const formattedData = data.map((item: any) => {          // Format date as 'DD MMM YYYY' for the labels/tooltips          const dateObj = new Date(item.timestamp_utc);          const dateStr = dateObj.toLocaleDateString("en-GB", {            day: "2-digit",            month: "short",            year: "numeric",          });
return {            x: dateStr,            y: Number(item.close_price),          };        });        // Since the limit gets chronological from oldest in this DB setup,         // we might not need to reverse if we want oldest -> newest in chart.        // Assuming we want the array as fetched:        setChartData(formattedData);      } catch (error) {        console.error("Error fetching line chart data:", error);      } finally {        setIsLoading(false);      }    };    fetchData();  }, []);.. 이하 생략}

1. 전 오류가 났습니다. 반복적으로 오류가 납니다. 걱정하지 않으셔도 됩니다. 따라하시는 여러분 컴퓨터에는 오류가 나지 않을 수 있습니다. 왜냐하면 포트번호를 우리가 정하지 않았기에 AI가 임의로 정한 번호로 되어 오류가 날수 있습니다.

1. 좌측의 1Issue를 눌러보세요 이러한 Next.js 같은 라이브러리를 사용하는 이유중 가장 핵심적인것이 여러 오류를 자체적으로 보고 한다는 것입니다.

1. 카피하고 AI에게 “수정해줘”라고 합니다.

프론트엔드 브라우저(예: localhost:3000)에서 백엔드(localhost:8000)로 리소스를 요청할 때 발생하는 전형적인 CORS(Cross-Origin Resource Sharing) 문제로 인해 발생한 에러입니다.백엔드 서버가 다른 도메인이나 포트에서 오는 요청을 허용하지 않으면 라우저는 보안상 이유로 데이터를 차단하고 Failed to fetch 에러를 반환합니다.이 문제를 해결하기 위해 백엔드 main.py에 FastAPI의 CORSMiddleware를 추가했습니다. 코드를 방금 수정 및 반영해두었으니, 백엔드 서버가 자동으로 리로드되며(수 초 소요) 이제 프론트엔드 Line Chart 화면을 새로고침 해보시면 정상적으로 표시될 것입니다! (새로고침 전에 살짝 기다리시면 서버가 코드를 반영하여 자동 시작됩니다.)

1. npm run dev(개발모드)로 했기에 프론트엔드가 실시간으로 수정된 코드를 반영해줍니다.

파트1을 마치며

이렇게 각각의 역할을 맡을 ‘정확한 도구의 이름’을 지정해주면, 복잡한 프로그래밍 문법을 몰라도 AI가 검색 엔진 노출(SEO)과 사용자 경험(UX)을 모두 잡은 완벽한 웹 화면을 눈앞에 만들어낼 것입니다.

파트1을 이렇게 마무리하고자 합니다. 현재는 바이브 코딩 시대 입니다. 그리고 이 책을 보시는 여러분들은 지금부터 이제 초보 코더가 아니라 ‘테크니컬 디렉터’ 입니다.

이전에도 앞으로도 우리는 코드를 한 줄 한 줄 직접 치는(타이핑하는) 사람이 아닙니다. 요즘은 v0 같은 AI 도구에 “이런 디자인으로 만들어줘”라고 하면 화면(UI)의 80%를 알아서 만들어냅니다.

우리의 역할은 AI가 만들어준 화면 조각들을 잘 조립하고(Composing), 요구사항에 맞게 잘 굴러가는지 검사(Reviewing)하는 현장 감독(테크니컬 디렉터)입니다.