최근 구직 활동중 생긴 의문

• tailwindcss, 그렇게 좋은가?

  요즘 현업에서는 tailwindcss를 많이 쓴다고 하길래 실무 감을 잊지 않도록 저도 tailwind와 대면해야겠다고 마음먹었습니다. 하지만 아직까지 제가 느낀 tailwind에 대한 감상으로는 bootstrap과 큰 차이가 없다.. 정도였습니다. 클래스명으로 스타일링을 하는 점에서 말이죠. 다만 tailwind는 말 그대로 css를 클래스명으로 지정하는 것이고, bootstrap은 아예 완성된 디자인을 제공한다는 점에선 확실히 다릅니다.

• AI툴, 꼭 써야하나?

  그리고 면접 때마다 항상 물어보는게 '어떤 AI 툴을 쓰세요?'라는 질문이었습니다.
  결론부터 말하자면 '챗지피티 말고는 써본 적 없다'가 저의 대답입니다. 더 깊은 이유에 대해서는 나중에 자세히 설명합니다. 현실적인 이유로는, 일단 돈이 없습니다.
  현업에서 사용하는 클로드라던가 커서라는 툴..전부 유료입니다. 하지만 비회원으로 챗지피티를 사용하면서도 개발하는것에 크게 불편함을 느끼진 못했습니다. 돈만 주면 당연히 다른 툴도 쓸 의향이 있습니다.

그러니까 한번 써보자

백문이 불여일견이라고 익숙하지 않은 것들과 인사라도 하기 위해 간단한 토이 프로젝트를 만들기로 합니다.
그리고 이것이 그 결과물입니다.

스탯 메이커 사이트 바로가기

솔직히 기능 자체는 정말 간단하게, 폼을 입력한대로 그래프가 만들어지는 게 전부입니다. 그렇지만 슬라이더라던가 컬러 픽커 같은 input들을 스타일링하기 위해 tailwind와 꽤 씨름을 했습니다.
아래로 제가 사용한 라이브러리에 대한 짤막한 사용후기가 있습니다.

tailwind

총평: 컴포넌트의 완벽한 커스텀은 CSS-in-JS 형식이 더 편하고 빨라 보인다.

문제 1. 왜 클래스 스타일 적용이 안되나?

저는 nextjs 15버전과 함께 제공하는 tailwindcss 4 버전을 사용했습니다.
하지만 초장부터 타이포 컴포넌트를 설정하는데 text-lg이상의 폰트 사이즈 지정 클래스가 먹히지 않아 상당히 당황스러웠습니다. 챗지피티에게 물어봐도 tailwind.config.js에서 safelist 같은걸 설정하라던가 등의 답변이 돌아왔지만 여전히 하나도 먹히지 않았어요. 공식 문서를 뒤져보아도 next.js에서 어떻게 세팅해야 하는지 등의 예시를 찾지 못했습니다.(이건 제가 영어를 잘 못해서 그런것같기도)

결론 1. 사용법이 문제였다

어처구니 없게도 제가 버전 4를 쓰면서 발생한 오류였는데요, 기본적으로 공식 문서에서는 global.css에 아래와 같은 명령어를 입력하라고 쓰여 있습니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

하지만 이건 버전 3에서까지만 사용되는 설정이고, 버전 4부터는 아래와 같이 변경됩니다.
(참고: https://tailwindcss.com/docs/upgrade-guide)

@import "tailwindcss";

챗지피티도 내가 쓰는 버전을 알려주니까 그제서야 제대로 된 답변을 해줬습니다.

문제 2. input의 세밀한 스타일링은 안되나?

제 프로젝트에서는 <input type='color'> 라던가 <input type='range'> 같은 녀석들이 사용되었기 때문에 이 친구들을 어떻게든 커스텀 스타일링을 하고 싶었습니다.
하지만 스크롤바같은 것들을 커스텀해본 사람들은 알겠지만, 보통 ::-webkit-slider-runnable-track, ::-webkit-slider-thumb 와 같은 webkit 클래스로 지정하는 방법이 있습니다. 더군다나 edge나 filrefox, opera 등 브라우저마다 적용해줘야 하는 클래스명이 다를수도 있기 때문에 상당히 까다로운 작업입니다.

결론 2. 안된다.나중에 해결하자.

그리고 tailwind에서는 이러한 밴더 프리픽스나 가상 요소들을 직접적으로 사용하는 방식이 불가능하고, 커스텀으로 css를 지정해줘야 합니다. 저는 커스텀 요소들에 시간을 쏟을 바에야 그냥 빠르게 프로젝트를 끝내고 싶었기에, 가상 요소를 커스텀하는 과제는 일단 미뤄두고 기본 range를 쓰기로 했습니다.
만약에 커스텀을 완료한다 해도, 사용자가 얼만큼 움직였는지를 보여주는 progress 바를 구현하기 위해선 별도의 자바스크립트 동작이 필요했기 때문입니다.

그래도 컬러 픽커 선택창 구현까진 어떻게 해냈습니다.

문제 3. 독자적인 컬러 팔레트를 사용할 수 있나?

보통 디자이너들이 시안을 짤 때 가장 중요하게 생각하는 것중 하나가 컬러 팔레트입니다.저도 처음 프로젝트의 시안을 피그마로 짤때 대략적인 포인트 컬러를 정해두었고, 처음에는 config 폴더에 임의의 컬러 팔레트, 폰트 사이즈 등을 지정해두었습니다. 이후 이 컬러를 이용해 컴포넌트를 구현하려 했으나..

결론 3. 기존 팔레트를 덮어씌우는 방식으로 사용 가능하다.

이런 식이나

@theme {
  --color-regal-blue: #243c5a; 
}

이런 식으로 커스텀 컬러를 추가하고, 덮어씌우는 방식으로 하면 된다고 합니다.
하지만 이렇게 세밀하게 컬러를 지정할 정도의 큰 프로젝트도 아니었기에, 저는 기존의 tailwind 컬러 팔레트를 이용하기로 했습니다.

// tailwind.config.js 
export default {
  theme: {
    colors: {
      primary: '#1E40AF',
      secondary: '#F43F5E',
      neutral: {
        100: '#F5F5F5',
        200: '#E5E5E5',
        900: '#171717',
      },
    },
  },
}

최종적으로 기본 텍스트 색상이나 폰트 타입만 추가했고 tailwind.config.js는 건드리지 않았습니다.

/* global.css */
@theme {
  --color-textBlack: #333;
  --font-dnf: "DnfBitbeatV2", sans-serif;
  --font-pretendard: "Pretendard", sans-serif;
}

제가 사용하며 느낀 장단점은 아래와 같습니다.

장점

• 기본 컬러팔레트와 폰트 사이즈가 정해져 있어 타이포와 같은 커스터마이징 시간을 단축할수 있다.
• 용량이 작다.
• 반응형에 따른 스타일링이 손쉽다. 특히 플렉스, 그리드와 같은 레이아웃 컴포넌트를 작성하기에 편했다.

단점

• 처음부터 끝까지, 브랜드 정체성을 녹여낸 스타일링을 하기엔 좀 어렵다.
• className(class)이 무지막지하게 길어진다. 진짜 보기 불편하다.(저는 그래서 백틱 형식으로 줄바꿈을 했습니다)
• 조건부 스타일링 코드를 짤 때도 스트링 값으로 대체해야 하다 보니까 관리를 어떻게 해야할지 모르겠다.
• tailwind만의 클래스명을 알기 위해 검색 시간이 필요하다. (일반적인 css로 입력하는게 더 속도가 빠르다.)

이러한 연유로 커스텀 속도만 따지면, styled-component와 같이 개별적으로 css를 작성하는 컴포넌트를 만드는게 더 빠르다고 느껴졌습니다. 아마 실무로 넘어가면 다른 방법을 배울수도 있겠죠.

chart.js

총평: 그래프 라이브러리를 따로 써보진 않았지만 입문하기에 좋았다.

사실 chart.js의 존재를 아예 모르고 있던 건 아니었습니다. 다만 제가 이녀석을 마지막으로 봤을때가 2018년도였기 때문에, cdn을 끌어와 html에서 써봤던게 전부입니다.그것마저도 제가 개발자들한테 넘겨주기 전에 테스트해보는 용도였고요.
그리고 다른 회사에서도 이 라이브러리를 자주 쓰는 것 같아, 그래프를 그리기 위해 채택되었습니다. 제가 설치한 것은 리액트에서 사용하기 위한 react-chartjs-2 라이브러리입니다.
제가 사용한 것은 Radar 컴포넌트였는데, 데이터를 보여주는 방법이 마음에 들지 않아 이녀석도 커스텀이 필요합니다.

제가 원한 커스텀은 그래프의 거미줄 간격을 넓히고, 라벨에 정확한 수치를 입력하고, 중앙에 있는 숫자를 없애는 정도.(맨 위에 있는 색상 설명도 없앴습니다) 라벨을 커스텀하기 위해 chartjs-plugin-datalabels라는 라이브러리를 별도로 설치해야 합니다. 커스텀이 완료된 그래프는 아래와 같습니다.

사실은 수치가 가운데 정렬로 보여지고, 수치 부분만 색상을 다르게 하고 싶었습니다. 하지만 빠르게 바꿀 수 있는 게 아니라서 현실과 타협하기..지피티 왈, 이것까지 구현하려면 canvas에 직접 그려내는 방법밖에 없다 합니다.

장점

• 기본적으로 쓰기 편하다. 커스텀도 쉽다.

단점

• 더 세밀한 라벨 커스텀이 어렵고, 별도의 라이브러리를 설치해야 한다. 하지만 이건 대부분의 그래픽 라이브러리가 같은 문제를 갖고 있다고 생각함. 이렇게 그려주는것만 해도 어디입니까?

surge

터미널로 작동하는게 좀 보기 불편했지만 괜찮다!

배포를 하기 위해 사용한 서비스입니다. 지난 개인프로젝트를 하면서 vercel, netlify까지는 사용해보았고 surge도 무료라길래 냅다 썼습니다. 그리고 main 브랜치에 커밋 시 자동으로 배포될 수 있도록 몇가지 설정을 손봤습니다.
아래는 .github/deploys/workflow/deploy.yml 코드 전문입니다. (챗지피티가 짜줌)

name: Deploy to Surge

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build Next.js
        run: npm run build

      - name: Debug build
        run: |
          echo "현재 디렉토리: $(pwd)"
          echo "루트 내용:"
          ls -alh
          echo "out 폴더 내용:"
          ls -alh ./out || echo "❌ ./out 폴더 없음"

      - name: Deploy to Surge
        run: npx surge ./out ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }} --force
        env:
          SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}

문제 1. 배포했는데 사이트가 안보인다.(404 페이지가 떴음)

말 그대로 배포된 사이트에 들어갔더니 뭔 회색 화면만 뜨는 문제였습니다.

결론 1. next.config.js에서 따로 세팅해줘야 한다.

Next.js 15 정적 빌드를 생성하려면 아래와 같이 바꿔야 한다고 합니다.그리고 제가 쓰는 next의 버전은 15라서 package.json에 export 라는 명령어도 써줄 필요가 없고요.

//next.config.js
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "export",
  images: { unoptimized: true },//얘는 신경 안써도 됨
};

export default nextConfig;

이렇게 해서 out 폴더가 만들어지면, 그 폴더의 내용을 배포하는 방식인 것 같습니다.

문제 2. 변경 사항이 배포 사이트에 반영되지 않는다.

분명히 스크립트를 작성했는데, 변경된 부분이 실제 사이트에 반영되지 않았습니다.일단 지피티에게 물어보니 친절하게도 원인을 짚어주네요.

결론 2. 강제 덮어쓰기 옵션 사용

그리고 이에 대한 해결책으로, 배포 시 강제 덮어씌우기 옵션을 사용하라고 알려주었습니다. 그래서 제가 올린 코드 전문을 보시면 Deploy to Surge 부분에서 --force 옵션이 들어가 있는 것을 알 수 있습니다.

  run: npx surge ./out ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }} --force

챗지피티가 아니었으면 배포도 제대로 못했을거라 생각합니다.

AI툴을 써보고 나니..

사실상 최근 만들고 있는 프로젝트들은 대부분이 챗지피티의 도움을 받아 개발되었습니다.
그리고 처음 글에서 개발을 할 때 챗지피티만을 사용했다는 답이 있었는데, 좀더 구체적인 이유로는 작업에 AI를 접목하기 전 AI의 부정적 경험을 겪었기 때문입니다.

1. 실제 활동중인 아티스트의 화풍을 AI에게 습득시켜, AI그림으로 돈을 번다던가(저작권 침해라고 생각합니다.)
2. AI로 광고 모델을 만들어서 실제 광고에 쓴다던가(언젠가 지하철에서 에듀X의 광고를 본 적이 있었는데 직업과 관련 없는 오브젝트를 갖다붙이기만 한 모양새라 저의 미감이 강제로 저하되는 경험이었습니다.)
3. AI 보이스 피싱 사례라던가
4. AI 상담원으로 인해 간단한 업무를 요청하는데도 실제 사람이 응대하는 것보다 시간이 걸린다던가

이러한 불편한 경험들이 AI의 긍정적인 모습을 압살할 정도로 많았기에, 코딩을 AI가 대신 짜게 하면 내가 스스로 생각할 힘을 잃어버리는 것이 아닌가? 하는 고민에 빠지게 되었습니다. 하지만 이 고민은 금방 접게 되었어요.

최근 개인 프로젝트를 하면서 구글 스프레드 시트를 DB로 활용하게 되었는데, 저는 스프레드 시트를 거의 쓸 줄 몰랐기에 인터넷 검색을 하면서 원하는 함수를 찾았죠. 하지만 대부분 블로그에서는 저와 다른 데이터 산출물을 예시로 들었기 때문에 제 시트에선 쓸 수 없었습니다.
그때 처음으로 chatGPT를 이용하였고, 곧바로 저에게 딱 맞는 함수를 제시해주었죠.
이후부터는 코드를 짤 때 혼자 구현하기 어려운 로직들을 지피티에게 물어보기도 하고, 제가 짠 코드가 어떤지 코드 리뷰를 부탁하기도 했습니다. 물론 처음 써보는 라이브러리의 사용법에 대해서도 GPT는 척척 알려주었습니다.
AI가 검색 시간을 대폭 줄여준 경험을 하고 나니 그 이후에는 AI를 쓰는 것에 거리낌이 없어졌습니다. 한마디로 제가 AI를 싫어했던건 일종의 색안경 때문이라고도 할 수 있겠네요.
AI에 대한 거부감이 없어져 이번 토이프로젝트를 만들 때에는 구글에서 만든 Gemini Code Assistant도 같이 사용했습니다.

gemini, 무료인건 좋은데 솔직히 느리다

하지만 gemini에게 질문을 한 순간 저는 vscode에 이녀석을 설치한 것을 후회했습니다.
보통 ai에게 프로토타입을 만들게 한다던가, 프로젝트를 세팅한다던가 등의 귀찮은 작업들을 ai에게 맡기는 듯 하더라고요. 저는 미리 만들어둔 input 컴포넌트를 gemini에게 다른 이름으로 복사해달라는 명령을 했습니다.

그..이거 너무 느린 거 아니냐? 정확히 기억은 안나지만 약 3분 후에야 컴포넌트가 새로 추가되었습니다.
심지어 파일까지 제가 생성해주고 그 안에 있는 코드만 채우라고 했을 뿐인데도요.
이럴 바에는 그냥 제가 직접 복붙하고 이름만 바꾸는게 더 빠릅니다.

그래요.코드를 직접 쓰라는건 좀 느릴 수 있습니다.
위에서 고민했던, input range의 스타일링을 커스텀 하려면 어떻게 해야해?라는 간단한 질문으로 테스트를 했고 gemini와 chatGPT에게 각각 물어보았습니다.

• gemini: 답변이 돌아오기까지 약 2분이 걸림
• chatGPT: 답변이 돌아기까지 약 3초가 걸림

↑내 표정
이거 진짜 너무한거 아니냐.....

내 코드 맘대로 바꾸지 마

더군다나 gemini는 답변을 줌과 동시에 내 코드를 멋대로 바꿔버리는 만행을 저질렀기에, 저는 매 질문이 끝날 때마다 '제발 내 코드를 건드리지 말라' 는 요청을 해야 했습니다.
물론 제가 이전에 작성한 걸 싸그리 바꾸는게 아니라, conflict가 난 코드를 고치는 것처럼 어떤 코드를 reject 할것인지 선택할 수 있습니다. 근데 이 작업 자체가 시간이 걸려서 굉장히 귀찮습니다.
gemini에서 질문을 할때 코드를 강제로 수정하는 기능을 해제할수는 없나 하고 찾아보았지만, 별다른 방법을 찾지 못했습니다. (아는분이 있다면 알려주세요)

화가 나서 매번 캡쳐하지는 않았는데 이런 상황이 반복됨

저처럼 구현하고 싶은 형태가 명확한 사람의 경우, AI가 직접 내용을 작성해주는 방식은 굉장히 불편하고 시간이 소모됩니다. 이건 비단 gemini에게서만 느낀게 아니고 다른 서비스에서도 느끼고 있어요.(내가 올린 이력서를 토대로 멋대로 경력 사항을 채운다던가..)
여하튼 AI가 직접 써주는 이 기능 때문에 작업속도는 더뎌지면서 제 피로도만 증가했고, 저는 gemini를 쓰는 것을 포기하고 GPT만 썼습니다.

AI 툴을 쓰는 것만이 정답일까?

그럼에도 불구하고 GPT 역시 실수를 합니다. 알려 주는대로 코드를 짰더니 원하는 기능이 구현되지 않기도 하고, 내 환경을 파악하지 못해 잘못된 솔루션을 제공하기도 합니다.
제가 처음에 고민한 코딩을 AI가 대신 짜게 하면 내가 스스로 생각할 힘을 잃어버리는 것이 아닌가 이 사항은 결국 대중의 미디어 리터러시와 연관되기 때문에 한 마디로 정리하기 힘들다고 생각합니다.

최근엔 사람들 사이에서 챗지피티를 활용하는게 트렌드가 되다 보니 최근에는 정말로 자아를 지피티한테 맡겨둔 것마냥 사용하는 사람들도 있다고 들었습니다. 학교에서 과제로 조사 과제를 주면 학생들은 챗지피티의 답변을 그대로 베껴 오는 경우도 있다고 하고요. (물론 극단적인 케이스입니다.)

이렇게 남용하는 사람이 많다 보니 저도 처음에는 스스로 로직을 짜지 못하면 개발자로서의 능력이 떨어진다고 생각했습니다.
하지만 마감일이 정해진 상태에서, 혼자 고민하고 시간을 낭비하는 것보단 AI의 도움을 받는게 더 효율적이지 않을까요? AI가 써준 코드를 그대로 복사하고 테스트를 거치지 않는 것이야말로 위의 극단적인 케이스와 다름없다고 생각합니다.

이미 우리 생활에서 AI기술은 더 많이 활용되고, 기술은 진화할 것입니다.하지만 AI는 결국 인간의 지식을 기반으로 발전할 것이므로, AI가 짜준 코드를 내가 올바르게 분석하며 검증 과정을 거치는 게 중요하다고 생각됩니다.
그래서 일단은 AI툴을 최대한 활용하되 AI에게 모든 걸 맡기지 않기로 했습니다.