우메다 공중정원

난 오사카에 오면 무조건 우메다 공중정원에 들르는 것을 목표로 한다. 마천루를 좋아하는 것이 첫번째 이유이고, 뻥 뚫린 공간에서 인간이 이룩한 문명을 바라볼 수 있다는 것이 두번째 이유이다. 흐린 날에 낮이라서 걱정했지만, 그럼에도 불구하고 우메다는 나에게 실망을 주지 않았다. 오히려 낮이라서 전에는 보지 못했던 곳들을 바라볼 수 있었기에 좋았다.

나를 따라와준 친구와 함께 맥주를 마시며 이런저런 이야기를 나눴다. "서울 상경"이 어렵다는 주변 사람들과, 지금 서울에 살고 있는 우리에 대해. 사견으로, 적응이 어려울 수 있는 이유를 "상경의 시기"로 상정했다. 우리는 어린 시절 올라왔기에 적응할 수 있었지만, 통상 사람들은 일러도 대학생이 되며 올라오고 일부는 학생 신분을 벗은 이후에 올라오니까. 인간은 시간이 지날수록 쇠퇴하기 마련이니까.

잘가라 순정이여

솔직하게 이번 여행은 실속이 없었다. 작년부터 지금까지 6번을 갔으면 그럴만도 한가... 싶었다. 오사카의 꽃은 타치노미에서의 기연인데, 다른 여행에 대비해서 기연이 적었다. 뭐랄까, 이 복잡 미묘한 감정은. 이젠 오사카를 떠나 보내야 하는건가 싶었다.

칸사이 국제공항으로 향하기 시작했다. 탁해진 하늘 아래 바다가 어찌 빛이 날까. 그저 썩어들어가는 바다를 바라보며 하늘을 날았다. 어두컴컴한 구름 사이를 뚫고 모국으로 돌아가기 시작했다. 구름과 구름 사이, 저무는 태양이 일직선으로 빛나고 있었다. 우리가 보지 못했던 것을 보여주려는 듯.

자유란 무엇인가? 지금 바라보고 있는 관서 하늘과, 지나간 우메다를 상기하며, 그런 생각을 했다. 우리가 가지고 있으면서 가질 수 없는 것. 지금 행하고 있는 스스로의 행동이 정녕 자율에 의거하는 행위인지. 그저 시대와 환경이 만드는 흐름에 편승하는 행위인지.

모든 것에 의문을 제시하기 시작했다. 우선적으로 확인된 결론은 “나 자신은 스스로의 자유를 박탈시켰다” 라는 것. 두번째로 확인된 결론은 “열심히 썩어들어가고 있다”는 것.

인생 계획 상 내 나이 서른 전에는 그저 시대와 환경을 따라 흘러야만 한다는 사실을 인지했다. 계획 수립 당시에는 별 생각을 안했으나, 지금 시점에서 보면 이 사회가 바라는 모습을 답습하고 있다는 생각을. 그 과정에서 내 개인의 의사결정 범위는 좁아져만 갔고 그저… 흐름을 따라 떠내려갈 뿐이지 아니한가. 라고

앞으로 어떻게 해야하는가에 대한 불신을 뒤로하고 다시 하늘을 보았다. 저 너머로 인천이 보이고, 하늘을 뒤덮던 구름은 저 멀리 동쪽으로 사라져갔다.

석양만이 지고 있었다.

H.Untact에는 3개의 페이지로 구성되어 있는데, 이번 챕터에서는 기능적 측면만 바라볼 예정이다.

1. 인덱스 페이지 인덱스 페이지는 퍼블리싱 능력이 필요하다. 위 사진처럼 전시장 지도를 표시해야 하는데, 사이즈를 잘 맞추어야 하기 때문에 예전에 골치 아팠던 기억이 있다. 이 부분은 다음 챕터에서 다룰 예정이다.

2. 아카이브 페이지 이 프로젝트의 중심이 되는 페이지이다. 각 학년과 장르에 맞는 분류로 정렬해야 하며, 검색 기능도 포함되어야 한다.

3. 디테일 페이지 각 작품의 상세 페이지이다. 작품의 설명과 해당 작가의 작품들을 보여주어야 한다.

간단히 요약해서 이런 형태로 진행하려고 한다.

구축 1 | 라이브러리 설치, 초기값 설정

우선 Next.js 환경을 구축한다.

yarn create next-app

이후 Prisma를 설치하고 Vercel Postgres 활성화 / 모델을 반영한다.

yarn add -D prisma
yarn add @prisma/client
npx prisma init

• /prisma/schema.prisma

  generator client {
    provider = "prisma-client-js"
  }
  

datasource db { provider = "postgresql" url = env("POSTGRES_PRISMA_URL") directUrl = env("POSTGRES_URL_NON_POOLING") }

model work_list { id Int @id title String type String type_detail String artist_id Int artist_name String? thumbnail String images String[] yt_url String? desc String artist artists @relation(fields: [artist_id], references: [id])

@@index([title, type])

}

model artists { id Int @id name String grade Int awards String[] works work_list[] artist_sns artist_sns[]

@@index([name])

}

model artist_sns { id Int @id @default(autoincrement()) artist_id Int platform String url String artist artists @relation(fields: [artist_id], references: [id]) }

* Vercel에서 Postgres를 활성화하고 아래 이미지 위치에 있는 .env 파일을 받는다.
(해당 프로젝트에 대한 글을 쓰기 시작한건 얼마 안되지만, 실질적으로 3달이 훌쩍 넘은 시간부터 조금조금씩 진행해서 생성일이 오래됐다...)
![Postgres](https://velog.velcdn.com/images/bash_ruv/post/c91a1485-e582-47f1-83ce-a4ea62339541/image.png)

* Prisma로 DB 마이그레이션 / API 타입 생성
(내가 이 프로젝트를 했을 당시에 db push로 처리했던 거 같은데, 원래는 그렇게 하면 안된다는 사실을 뒤늦게 알게 되었다. 추후 별도로 글을 남겨보려고 한다.)
```bash
npx prisma db push
npx prisma generate

구축 2 | 기능 구현

기능구현은 어렵지 않다. Prisma가 워낙 잘되어 있기도 하고, Next.js가 App Router로 전환되면서 기본적으로 서버사이드 렌더링을 우선하기 때문에 그냥 주르륵 쓰면 된다.

• /lib/prisma/index.ts

  import { PrismaClient } from "@prisma/client";
  

declare global { var prisma: PrismaClient | undefined; }

const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV === "development") global.prisma = prisma;

export default prisma;

* /lib/prisma/transaction.ts
```ts
import prisma from "@/lib/prisma";

export async function archiveList() {
  /*
      D: Design
    I: Illust
    M: Media
  */
  const types = ["D", "I", "M"];
  const grades = [3, 2, 1];

  const queries = types.flatMap((type) =>
    grades.map((grade) => {
      const whereCondition = {
        type: { equals: type },
        artist: { grade: { equals: grade } },
      };

      const orderByCondition = [
        {
          artist: {
            id: "asc" as const,
          },
        },
        {
          id: "asc" as const,
        },
      ];

      const selectFields = {
        id: true,
        title: true,
        type: true,
        artist_name: true,
        thumbnail: true,
        artist: {
          select: {
            name: true,
            grade: true,
          },
        },
      };

      return prisma.work_list.findMany({
        where: whereCondition,
        orderBy: orderByCondition,
        select: selectFields,
      });
    }),
  );

  const results = await prisma.$transaction(queries);

  const combinedResults = results.map((result, index) => {
    const typeIndex = Math.floor(index / grades.length);
    const gradeIndex = index % grades.length;
    const type = types[typeIndex];
    const grade = grades[gradeIndex];

    return {
      query: { type, grade },
      data: result,
    };
  });

  return combinedResults;
}

export async function work(id: number) {
  return await prisma.work_list.findUnique({
    where: { id },
  });
}

구축 3 | 마무리

이렇게까지 하면 DB에서 데이터를 읽어들이는 코드 작성은 완료된다. 다음 글에서는 퍼블리싱 작업과 검색 코드 작성을 서술하고자 한다.

주저리 | Daily Music

원래 글을 쓸 계획이 없었고, 이미 한참 진행중인 프로젝트기에 누락되거나 미흡한 부분들이 존재한다. 이 부분들은 추후 회고하면서 수정을 진행하고자 한다.

지금 내 플레이리스트가 J-POP이 점령했지만, 그 이전에 듣던 한국 인디들도 남아있었단 걸 최근에 깨달았다. 해서 오늘의 선곡은 한국노래로 하려고 한다. 아마 뒤에는 계속 일본 노래들이 데일리 뮤직으로 나올 예정...

!youtube[lrK6PnYHdGQ?si=9pLJamicCN6KJyhn]

처음 만들어본 웹사이트가 무엇인가? 라고 하면 나는 H.Untact 프로젝트를 손에 꼽는다. 하지만 내 첫 게시글을 보면 알 수 있듯, 해당 프로젝트는 내가 웹개발에 대해 아무런 전문지식이 없는 상태에서 무작정 개발한 프로젝트인지라 지금 시점에서 "포트폴리오로 활용할 수 있는가?" 라고 묻는다면… 솔직히 쪽팔린다. 물론 처음으로 완료한 프로젝트인 만큼 이를 통해 배운 것도 많고 성장의 바탕이 되었기 때문에 이후 완료하지 못해 결국 삭제된 리포지토리들과는 달리 아직도 원본을 소유하고 있다.

허나 이대로 방치할 수는 없어 새로 리팩토링을 시작하고자 한다. 과거와는 달리, 현역으로 커리어를 쌓는 지금에서 보면 고쳐주고 싶은 부분이 많기 때문이다. 실은 React 버전으로 작업한 것이 있기는 하나, 오랫동안 관리가 되지 않아 실행에 있어 여러 선작업을 해주어야 하고 결과물이 썩 깔끔하지 못하다는 단점이 있어 이번 리팩토링의 주요 타겟으로 선정하였다.

시작에 앞서 | H.Untact란?

Hello Untact, 이하 H.Untact는 2020년 본인 모교의 학과전시회 프로젝트이다. 원초대로라면 오프라인 전시회를 진행해야 했지만 당시 COVID-19로 인해 전시는 커녕 학생들의 등교에도 지장이 생기는 불상사가 발생하였기에 이를 타개하고자 처음으로 실시한 온라인 전시회였다.

시작 | 스택 결정

리팩토링 프로젝트의 시작은 늘 이것이 문제인 것 같다. 스택을 결정하는 것. 가장 중점적으로 본 스택은 다름아닌 “DB”였다. 그도 그럴 것이, 전시회라는 특성상 많은 양의 전시 작품을 관리해야 하는 문제가 존재하기 때문이다. 이전에 작성한 React 버전의 경우 전부 JSON으로 작성하였으나, 이번에는 포트폴리오용으로 리팩토링을 결정했으니 DB를 사용하기로 했다.

이 프로젝트를 진행할 때 즈음 Vercel에서 메일이 온 게 있었다. Vercel Storage를 이용한 데이터베이스 이용이 가능하다는 내용이었다. 마침 이 프로젝트를 구성함에 있어 Vercel로 호스팅을 할 계획이었기에 내용을 살펴봤고, Vercel Postgres와 Cloudflare의 R2를 사용하기로 결정했다.

_Q: 갑자기 R2는 왜 나온건가요? A: 원래는 Vercel Blob을 활용하려고 했으나…… 무료 사용량이 너무 작아서…… _

또한 DB를 구성하는 만큼 서버의 사용이 필요한데, 이를 간단히 관리하기 위해 Next.js를 사용하기로 결정했다.

향후 계획

우선 해당 글을 쓰는 시점에서는 DB에 데이터 채워넣는 노가다를 진행중이다.

??: 자동화하면 되는 거 아닌가요? 나: 자동화가 가능한 상황이었으면 이러고 있었을까요…ㅋㅋㅠㅠ

해서 아래 내용으로 글을 작성하고자 한다.

• Next.js와 Prisma 셋팅, DB 구조 설계 및 모델 구성
• 퍼블리싱
• 리팩토링 중 발생한 궁금증 해결 (이는 별도의 포스팅 목록으로 들어갈 듯하다.)
• 작업중 벌어진 버그나 에러, 이를 해결하기 위한 트러블 슈팅 ← 이건 솔직히 작성 안될수도 있다. 너무 순조로워서…ㅋㅋ

DB 데이터를 전부 채워넣은 후 첫번째 글을 써보려고 한다.

주저리 | Daily Music

글을 쓰는 본인은 음악을 좋아하고, 다른사람들에게 츄라이를 하는 인간이다. 해서 매번 글 마지막에 데일리 뮤직을 넣어볼까 한다.

!youtube[Azl6lkTiRAk?si=_TB8tIVXVu7iLpLA]

고교생활에서의 탈출.

난 고등학교 생활을 잘하지 못했다. 경상도 어느 조그만한 깡촌에서 아무 생각도 없이 무작정 서울에 있는 고등학교에 진학해 생활을 시작했으니 어쩌고 보면 당연한 수순이었을지도 모른다. 어느 학교나 그럴지는 모르겠지만 우리 학교는 그 당시의 모든 사회적 문제를 한꺼번에 안고 있었다. 남녀가 서로 갈라져서 싸우질 않나, 선동과 날조로 정치질을 하질 않나... 깡촌 소년인 난 이 정신나간 상황에 진절머리가 나고 있었는데 아닌 와중 인간관계마저 박살나기 시작해 학교를 빠르게 탈출해야겠다고 마음을 먹었다.

가장 빠른 방법은 취업이었다. 당시에 나는 UI / UX 디자인을 공부하고 있었고, 자연스레 웹개발에 대해 알게 되었다. 하지만 그당시엔 JS는 무슨, HTML도 제대로 할 줄 몰랐다. 그럼에도 포기하지 않았던 건 지금와서 봤을 때 순전히 “독기” 때문이리라 믿는다. 학교를 탈출하기 위한 수단이었기도 함과 동시에 학교 생활을 잊게 해주는 수단이었기 때문이리라 믿는다.

첫 회사, “스타트업”이란 무엇인가.

고등학교 연계로 총 일곱 곳의 회사에 입사신청을 했다. 그 중 한 곳은 “B2B 웰니스 서비스”를 제공하는 회사였는데, 개인적으로 인간의 심리학과 더 나은 삶 등에 대한 고민을 많이 했던 나였기에 “재미있겠다”라는 생각으로 그 회사에 가기로 했다.

회사 안에서는 어려움의 연속이었다. 막말로 아무것도 모르는 짬찌가 무언가를 하려고 하니 어려움이 생길 수 밖에 없던 것이었다. 그것으로 끝이 아니었다. 프론트엔드 담당자는 나 혼자였고, 자주 소통해야 하는 대상 중 디자이너와 기획자분도 처음하는 분들이었다. 디자이너 분은 일러레에서 UI / UX로 넘어온 케이스고 기획자분은 원래 다른 직업이셨는데 기획으로 전직한 케이스였다. 이런 상황에서 기존에 있는 회사 플랫폼은 단 한 분만이 컨트롤이 가능한, 막말로다가 십중팔구 개판 5분전이었다. 이를 해결하기 위해 “리팩토링 프로젝트”를 진행하였다.

그 과정도 쉬웠겠는가? 아무것도 모르는 멤버들(나, 디자이너, 기획자)과 그나마 회사에 오랫동안 계신 백엔드 개발자분. 총 4명이서 프로젝트를 개시하는데 우여곡절이 말도 아니었다. 회사 특성상 플랫폼을 총 4개를 개발해야 하는데, 시간은 반년에서 1년이 주어졌다. 그 과정 속에서 난 모든 멤버들과 치열하게 다투며 개발을 진행하였고, 목표 완수가 눈앞에 다다를 시점에서 회사 상황상 프로젝트 중단이라는 상황에 부닺히고 말았다.

그저 멍했다. 갑작스럽게 대표가 이야기하는 “재정난”. 스카웃되어 이직하신다는 기획자님. 퇴사를 하신다는 디자이너님. 회사에 더 이상 있기 싫었다. 그래서 이직을 진행했다. 나를 통해 취직한 친구가 하나 있었는데, 그 친구를 통해 이직을 했다.

두번째 시작, 그저 흘러갈 뿐인 시간.

이직한 이후로 나에게 배정받은 직무는 “퍼블리셔”. 물론 난 디자인 전공이었고 이를 기반으로 개발자로 커리어를 시작한 것이기 때문에 직무에는 딱히 불만을 가지지 않았다. 문제는 퍼미션이었다. CSS를 제외한 그 어떤 것도 만질 수 없었다. 진짜 솔직하게 말해서, 개발로 해결 가능한 영역들이 분명 존재했으나 이 회사는 그런 거 없었다. 지금에서야 난 어느정도 능력을 인정받아 RN 기반 웹앱 리팩토링 프로젝트 등을 컨트롤하고 있지만, 아직도 메인 프로덕트인 플랫폼 쪽은 CSS(그래도 내가 입사한 이후로 CSS in JS로 리팩토링이 되긴 했다.)외에는 아무것도 컨트롤 할 수 없었다. “엥 그게 뭐가 이상한거죠?” 싶을 수 있겠지만. 컴포넌트를 비롯한 태그 하나 조차 내가 만질 수 있는 영역이 아니라고 한다면 어느정도 이해가 될 것이다. 이미 짜여진 컴포넌트와 태그에 CSS로 모든 걸 처리해야 한다는 것이다. 그러다보니 디자인 시안을 그대로 구현할 수 없었으며, 매번 내가 디자인팀과 합의를 봐야 했다. 또 내가 CSS를 써두면 나중에 사수님(플랫폼 프론트)이 리팩토링을 이유로 나조차도 알아볼 수 없게 코드를 수정하곤 했다. 이 상황의 연속이 화가 났다. “스타트업”이라는 이름만 사용한 좋소기업이 아니던가. 심지어 팀원들도 이미 이런 상황이 익숙하다는 듯 자포자기한 상태였고, 윗분들은 이런 상황도 모른 채 그저 투자자들의 요구사항만 우리한테 던지고 있는 이 상황. 그때부터 난 여행을 다니기 시작했다.

관서지방의 낭만과 위태로운 커리어

지금까지 일본을 총 네 번 다녀왔고, 다섯번째 여행을 하는 중이다. 이 모든 여행에서 칸사이 지방은 빠지지 않았다. 처음으로 본 낭만적인 도시기 때문이다.

낮에는 여유롭다. (물론 관광지는 그럴리 없지만) 피가 느리게 흐른다는 게 무슨 느낌인지 바로 체감이 오는 환경이 내 눈앞에 펼쳐진다. 천천히 걸어다니는 사람들, 따뜻한 햇빛, 기분좋은 바람. 이 모든 것들이 좋았다. 밤이 되면 하나 둘씩 퇴근하면서 타치노미(선술집)에 모여 누가 어떤 사람이든 다같이 술 한잔 기울이는 이 낭만이 좋았다. 이 낭만 덕분에 작년 한 해를 버텼던 것 같다. “일본 여행을 위해 돈을 모은다” 라는 근거도 있었고.

하지만 이렇게 버틴 댓가는 참… 그지같았달까. 회사의 BM은 정상적으로 작동하지 않았고, 지금 아득바득 버티고 있는 중인 걸로 알고 있다. 나를 포함한 팀원들은 법적 소속이 바뀌었다. 새로운 프로젝트를 진행한다고 말은 나오는데 나한테만 해당사항이 없는건지 다른 팀원들 바쁠 때 나만 여유롭다. 프로젝트 진척여부를 물어보면 팀원들도 “새로운 프로젝트를 위한 스터디만 하는 중이고 실질적으로 진행된 건 없다.”라고 한다. 이 상황이 싫었다. 불안했다. 회사에서 무엇을 해야할 지 감도 안잡혔다. 이직을 생각했지만 인생 계획상 이번 년도만 버티면 끝날 게임인지라 무작정 버티고 있다. “올해 중으로는 버티겠지… 버티겠지…” 라고. 지금 와서 생각해보면 패닉상태가 아니었나 싶다. 아무것도 할 수 없다는 무기력함과 캄캄해진 인생계획들이 날 힘들게 했다. 그래서 무작정 2주라는(실질적으론 연차 7개다.) 휴식기를 가지기로 했다. 뇌를 식히기로 했다. 관서지방에서의 식도락 여행에서 벗어나 “일본”이라는 국가 자체를 둘러보며 쉬어보기로 했다.

관동의 중심에서 글을 써보다.

한국인의 특성이 어디 안갈까… 온갖 곳을 다 돌아다녔다. 간단하게 지역만 요약하자면

• 도쿄
• 요코하마
• 치바
• 하코네
• 히메지
• 오사카
• 후쿠오카 (예정에 없었지만 친구가 여행와서 급히 신칸센 타고 놀러갔다)
• 교토
• 오카야마
• 다카마쓰
• 히로시마

(누가 계획 이따구로 짰어? 어… 나네?) 이렇게 돌아다니며 생각을 비워냈다. 그저 “다음은 어디로 가볼까/?“, “저녁 식사는 어디서 뭘 먹지?” 같은 어찌보면 인간이 살아감으로서 기초적으로 하는 생각만 하며 유랑했다.

이러다 숙소에 돌아와서 생각에 잠긴다. “앞으로는 어떤 삶을 살아야 하는건가, 스스로의 성장을 위한 방법이 무엇인가?”

도쿄 일정 중 유랑과 고민을 반복하게 되었고 시부야 일정이 있는 날이라 그 곳에 딱 도착한 순간 생각 하나가 스치듯 지나갔다. “기록의 빈약이 문제다.”

생각보다 난 기록을 하지 않았음이 떠올랐다. 해서 맨날 보던 공식문서를 또 보고 또 보는 것이 습관이었는데, 오히려 그러는 것이 내 커리어의 출처를 증명하지 못했고 과거의 선택을 돌아보지 못하게 막는 것이었다. 이같은 사실을 알고 나서 난 시부야 한복판에 잠깐 멈춰서 주변 카페에 들어가 메모장을 열고 이 글을 쓰기 시작했다.

결론

지금까지 쓴 이야기는 내 과거와 현재의 모습에 불가하다. 줄기차게 썼지만, 분명 스스로 검수하는 과정에서 내용이 우당탕탕 줄어들 것이 틀림없기에 결론부를 따로 써본다.

앞으로 개발일지를 많이 쓸 듯하다. 옛날에 만들었던 것을 새로 리팩토링을 진행하고 있는데, 여기서부터 시작할 듯하다.

지금같은 주저리도 종종 쓸… 지도 모른다. 이미 인스타 비계가 존재하긴 하지만 뭐… 여차하면 쓰겠지…

추신

글을 마무리한 시점 이후 한국에 복귀했다. 복귀 이후에 여러 일들이 있었고, 이 글은 서서히 잊혀졌었다. 어느덧 태양이 우리를 태워먹을 심산으로 쳐다보고 있는 시기가 되고, 과거 노트를 열어보니 이 글의 초안을 찾게 되어 늦었지만 검수 후 올려본다.

내 주전공인 FE 뿐만 아니라 BE / DB / AI / ETH 등등 이 회사에서 갑자기 배우는 영역이 넓어진 까닭에 잊지 않기 위해선 글을 써야할 필요성을 다시 한 번 절실하게 깨닫는다.