핵심 개념 1 — JSON과 CSV, 두 가지 데이터 파일 형식

오늘 다룰 파일 형식은 두 가지입니다. 코드로 들어가기 전에 파일 자체의 모양을 봅니다.

JSON

첫 번째는 JSON입니다. 풀어쓰면 JavaScript Object Notation. 이름에 JavaScript가 들어 있고, P5.js도 JavaScript 기반이라 둘의 궁합이 좋습니다.

{
  "cities": [
    { "name": "서울", "population": 9736027, "area": 605 },
    { "name": "부산", "population": 3359527, "area": 770 },
    { "name": "대구", "population": 2385412, "area": 883 }
  ]
}

세 가지 기호만 알면 구조를 읽을 수 있습니다.

• 중괄호 { } — 하나의 묶음 (객체). 7주차 클래스로 만든 객체와 같은 모양입니다
• "키": 값 — 이름표와 내용. "name": "서울"은 “name이라는 이름표 아래 서울이 있다”는 의미입니다
• 대괄호 [ ] — 같은 종류 여러 개를 줄 세운 것 (배열). "cities": [ ... ]는 도시들이 줄 서 있는 모양입니다

7주차에서 ball.x, ball.size로 객체의 값을 꺼냈던 것과 같이, JSON에서도 점(.)으로 값을 꺼냅니다.

CSV

두 번째는 CSV입니다. Comma-Separated Values, 쉼표로 구분된 값. JSON보다 훨씬 단순합니다.

name,population,area
서울,9736027,605
부산,3359527,770
대구,2385412,883

표 형태입니다. 첫 줄은 열 이름(header)이고, 그 아래는 각 행입니다. 쉼표가 칸막이 역할을 합니다.

엑셀이나 구글 시트에서 ’다른 이름으로 저장 → CSV’를 누르면 정확히 이 형태가 됩니다. 스프레드시트에서 만든 데이터를 그대로 P5.js로 가져올 수 있습니다.

둘을 언제 쓸까

핵심 개념 2 — preload()가 왜 따로 있을까

지금까지의 실행 순서

지금까지 사용한 P5.js의 흐름은 다음과 같았습니다.

setup() → draw() → draw() → draw() → ...

setup()이 한 번, draw()가 매 프레임 반복되는 구조입니다. 오늘부터는 여기에 하나가 더 추가됩니다.

preload() → setup() → draw() → draw() → ...

preload()가 가장 앞에 있고, preload() 안의 일이 완전히 끝날 때까지 setup()은 시작되지 않습니다.

왜 따로 있는가

이유는 한 가지 사실 때문입니다 — 데이터 파일을 읽는 데는 시간이 걸립니다.

파일이 크면 더 오래 걸리고, 인터넷에서 가져오면 네트워크 속도에 따라 들쭉날쭉합니다. 만약 setup() 안에서 loadJSON을 호출하면 다음과 같은 일이 벌어집니다.

let data;

function setup() {
  createCanvas(400, 400);
  data = loadJSON("data.json");  // 읽기 시작 (끝날 때까지 안 기다림)
  console.log(data);             // 아직 비어 있음 → undefined
}

loadJSON은 읽기를 시작만 하고 바로 다음 줄로 넘어갑니다. 그 다음 줄에서 data를 쓰려고 하면 아직 비어 있어서 에러가 발생합니다.

preload()는 이 문제를 해결합니다. P5.js에게 ‘이 안의 일이 다 끝날 때까지 setup() 시작하지 마’ 라고 알려주는 자리입니다.

식당 비유

preload()는 식당의 재료 준비 단계에 해당합니다. 셰프(setup)가 요리를 시작하기 전에 재료가 다 배달되어야 합니다. 채소도 안 왔는데 도마부터 두드리면 진행이 막힙니다. 그래서 P5.js는 ’재료 다 왔어요’라는 신호를 받을 때까지 셰프를 잡아둡니다.

기본 구조

let data;

function preload() {
  data = loadJSON("data.json");  // 데이터 준비
}

function setup() {
  createCanvas(400, 400);
  console.log(data);  // 여기에선 data가 준비되어 있음
}

function draw() {
  background(220);
}

핵심 개념 3 — loadJSON()으로 JSON 불러오기

파일 준비

P5.js Web Editor에서 데이터 파일을 추가합니다.

1. 화면 왼쪽 위 화살표() 클릭해서 파일 패널 열기
2. 파일 목록 위쪽의 ▼ 클릭 → “Create File” 선택
3. 파일명 data.json 입력 후 생성
4. 아래 내용을 그대로 붙여넣고 저장 (Ctrl/Cmd + S)

{
  "cities": [
    { "name": "서울", "population": 9736027, "area": 605 },
    { "name": "부산", "population": 3359527, "area": 770 },
    { "name": "대구", "population": 2385412, "area": 883 },
    { "name": "인천", "population": 2948375, "area": 1063 },
    { "name": "광주", "population": 1455048, "area": 501 }
  ]
}

한국 5개 도시의 이름·인구·면적 데이터입니다. 곧 이 데이터를 코드로 꺼냅니다.

로드하고 콘솔로 확인

let cityData;

function preload() {
  cityData = loadJSON("data.json");
}

function setup() {
  createCanvas(400, 400);
  console.log(cityData);
}

이게 전부입니다. preload()에서 한 줄, setup()에서 콘솔 확인 한 줄.

점 표기법 — 한 단계만 깊이 가보기

데이터 안의 값을 꺼낼 때는 점(.)을 써서 단계별로 들어갑니다.

function setup() {
  createCanvas(400, 400);

  console.log(cityData.cities);          // 도시 배열 5개
  console.log(cityData.cities[0]);       // 첫 번째 도시 객체
  console.log(cityData.cities[0].name);  // "서울"
}

세 줄에서 점이 한 단계씩 깊어집니다. cityData → 그 안의 cities 배열 → 0번째 → 그 객체의 name.

7주차에 ball.x로 객체 프로퍼티 꺼냈던 그 문법, 그대로입니다. 새 문법이 아닙니다.

모든 도시 꺼내기 — for문

도시 5개를 cities[0], cities[1]처럼 다섯 줄로 쓰는 대신, 6주차 for문을 그대로 가져옵니다.

function setup() {
  createCanvas(400, 400);

  let cities = cityData.cities;
  for (let i = 0; i < cities.length; i++) {
    let city = cities[i];
    console.log(city.name + " — 인구 " + city.population);
  }
}

기대 콘솔 출력.

서울 — 인구 9736027
부산 — 인구 3359527
대구 — 인구 2385412
인천 — 인구 2948375
광주 — 인구 1455048

let city = cities[i] 한 줄이 핵심입니다. i번째 도시를 city라는 짧은 이름으로 받아두면, 그 다음부터 city.name, city.population로 깔끔하게 쓸 수 있습니다. cities[i].name을 반복하는 것보다 읽기 좋습니다.

핵심 개념 4 — loadTable()로 CSV 불러오기

파일 준비

P5.js Web Editor에서 data.csv 파일을 새로 만들고 아래 내용을 붙여넣습니다.

name,population,area
서울,9736027,605
부산,3359527,770
대구,2385412,883
인천,2948375,1063
광주,1455048,501

JSON과 똑같은 데이터, 형식만 표입니다.

로드 — 인자 세 개

let table;

function preload() {
  table = loadTable("data.csv", "csv", "header");
}

function setup() {
  createCanvas(400, 400);
  console.log(table.getRowCount());
}

loadTable의 인자가 세 개입니다.

1. "data.csv" — 파일 이름
2. "csv" — 형식이 CSV라고 알려주는 표시
3. "header" — 첫 줄을 데이터가 아니라 열 이름으로 인식하라는 지시. 이걸 빼면 “name, population, area”도 데이터로 들어가서 결과가 망가집니다

table.getRowCount()로 행 수를 찍어보면 5가 나옵니다. 헤더 빼고 5줄.

값 꺼내기 — 두 메서드만 기억

function setup() {
  createCanvas(400, 400);

  console.log(table.getString(0, "name"));        // "서울"
  console.log(table.getNum(0, "population"));     // 9736027
}

메서드 두 개만 알면 됩니다.

• getString(행번호, "열이름") — 글자(이름·문자) 가져오기
• getNum(행번호, "열이름") — 숫자 가져오기

CSV 파일에서는 모든 값이 먼저 글자로 저장됩니다. 숫자도 "9736027"이라는 글자로 들어 있습니다. getNum은 그 값을 실제 숫자로 바꿔주는 함수입니다.

전체 행 순회

for문으로 행 번호를 돌립니다.

function setup() {
  createCanvas(400, 400);

  for (let r = 0; r < table.getRowCount(); r++) {
    let name = table.getString(r, "name");
    let pop = table.getNum(r, "population");
    console.log(name + " — 인구 " + pop);
  }
}

JSON에서 cities[i].name을 꺼냈던 것과 패턴이 똑같습니다. for문으로 인덱스 돌리고, 각 항목에서 값 두 개 꺼내고, 사용. JSON이든 CSV든 이 패턴만 익히면 됩니다.

JSON과 CSV 비교