코드 아키텍처

소개 사이트를 만들고(웹 사이트 만들기), 기능을 더하고(기능 추가하기), 방문자가 남긴 걸 저장까지 했습니다. 기능 추가하기 끝에서는 클로드에게 내 사이트 구조를 설명받아 보기도 했죠. 그 사이트는 화면을 그리는 코드였고, 파일 한 장이라 구조가 단순했어요. 실무 시스템은 이보다 크고, 코드를 아무 데나 쌓지 않고 역할별로 나눠 둡니다. 그 나누는 방식이 아키텍처예요.

코드는 크게 두 부분으로 나뉩니다. 화면처럼 사람이 보고 누르는 쪽을 프론트엔드, 뒤에서 데이터와 규칙을 처리하고 저장하는 쪽을 백엔드라고 불러요.

앞서 본 서버와 클라이언트와 이어집니다. 내가 보는 화면(클라이언트)이 프론트엔드, 뒤에서 대답해 주는 서버가 백엔드 쪽이에요. 내 소개 사이트는 프론트엔드만 있었고, 방문자가 남긴 걸 저장할 때는 Netlify Forms가 백엔드 역할을 대신 맡아 줬습니다.

코드가 커지면 역할별로 층을 나눠 쌓습니다. 가장 흔한 방식이 레이어드 아키텍처예요. 화면, 로직, 데이터 세 층으로 나눕니다. 위 층이 아래 층을 불러 쓰는 식이고, 요청은 위에서 아래로 내려갔다가 결과가 다시 위로 올라옵니다.

층을 나눠 두면 좋은 점이 있어요. 문제가 생겼을 때 “어느 층 문제야?”로 범위를 좁힐 수 있고, 한 층만 고쳐도 나머지 층에 영향이 덜 갑니다.

층으로 쌓는 대신, 핵심 로직을 가운데 두고 화면·데이터 같은 바깥을 갈아 끼우게 짜는 헥사고날 아키텍처도 있습니다. 지금은 정답이 하나가 아니라 여러 배치가 있다는 것만 알면 충분해요.

이렇게 나눠 볼 줄 알면 낯선 시스템을 만나도 두 질문으로 지도를 그릴 수 있습니다. “이건 프론트엔드야 백엔드야?”, “어느 층 코드야?” 코드를 다 못 읽어도, 어디를 봐야 할지 아는 사람은 될 수 있어요.