LightStair CSS 개발한 이유
나는 풀스택 개발자로써 디자인을 잘하는 것은 아니지만 CSS도 대충 코딩하지 않는다.
최근 사이트 전체의 글자, 배경, 테두리에 대한 그레이스케일 색상을 여러 단계의 밝기로 CSS 색상을 선언하려는데 조율하기가 미치고 팔짝 뛸 노릇이었다.
글자, 배경, 테두리는 각각 서로 다른 단계의 밝기로 선언해야 한다. 100%가 가장 밝은 밝기 수치라고 했을 때 흰색 위에서 96% 밝기의 배경색을 가진 상자는 티가 나지만 96% 밝기를 글자색에 적용하면 볼 수가 없다.
또한 글자, 배경, 테두리를 각각 단독으로 사용하는 것이 아니다. 이 셋은 조합되어 사용된다. 각각의 색상을 선언 후 조합해 보면 배경에 글자가 보이지 않거나 배경과 선이 구분되지 않기도 한다. 이를 조율한다고 여기의 색상을 바꾸면 저기의 조합이 어긋나는 등 짜증나는 상황이 발생한다.
글자, 배경, 테두리 각각 4단계의 밝기를 도입한다면 그 조합은 무려 64가지. 여기에 다크 모드까지 고려하면 64가지 조합을 두 벌 만들어야 한다.
그래서 나는 글자, 배경, 테두리의 색상과 밝기 단계를 설정할 수 있고 모든 조합을 한 눈에 볼 수 있는 CLI 도구를 만들었다.
npm 패키지로 설치할 수 있으며 GitHub에 공개되어 있다.
로컬 LLM으로 AI 짝 프로그래밍
나는 바이브 코딩을 하지 않는다. 물론 1회용 프로그램이나 개인적인 용도의 대충 만들어도 되는 프로그램을 만들 때는 바이브 코딩을 한다. (AI로 그림도 종종 그리니까 나는 바이브 페인팅을 하는 아티스트지?)
Claude나 Codex를 쓰는 남들과 달리 나는 로컬 LLM에 관심이 많고 모든 것을 다 갖춘 코딩 에이전트 보다 텅빈 도화지 같은 Pi 코딩 에이전트를 사용한다. 참고로 나의 로컬 LLM 환경은 다음과 같다.
- CPU: Apple M3 Max 64GB
- 주 코딩 모델: Qwen3.6-35B-A3B
- 실제 사용하는 양자화된 모델: Qwen3.6-35B-A3B-oQ4e-fp16-mtp
- 주 LLM 실행기: oMLX
- 코딩 에이전트: Pi Coding Agent
이번 LightStair CSS를 개발하면서 로컬 LLM을 적극 활용하여 AI와 짝 프로그래밍(Pair Programming)을 했다. 애초에 로컬 LLM으로는 바이브 코딩이 불가능하다. 짝 프로그래밍이므로 AI가 생성한 모든 코드는 검토 및 이해하고 있다.
로컬 LLM과 어느 정도의 수준으로 짝 프로그래밍이 가능한지 궁금한 사람들을 위해 세션 하나를 공개할 테니 다음 링크를 클릭해 보자. 이 세션에서는 Ornith-1.0-35B 모델을 사용했는데 Qwen3.6-35B-A3B 모델과 비슷한 성능이다.
Pi 에이전트의 세션 통계를 바탕으로 LightStair CSS 개발에 사용된 토큰은 입력 약 230만 토큰, 출력 약 49만 토큰이다.