본문 바로가기

전체 글95

웹) chzzk-watcher 웹버전을 만들다. 목차 이전에 만들었던 chzzk-watcher는 익스텐션 형태였다. 이번엔 프론트와 백엔드를 조합해서 제대로 된 서비스를 만들었다. https://chzzk-watcher-web.vercel.app왜 만들었나필자는 인터넷 방송을 꽤 많이 본다. 팔로잉도 많이 해뒀지만, 문제는 팔로잉하지 않은 채널에서 재밌는 방송이 벌어지는 경우가 있다는 거다. 그걸 실시간으로 확인하는 방법이 마땅치 않았다.치지직에도 인기 순위는 있다. 근데 전체 방송 탭에 들어가야 보이고, 거기엔 라이브와 동영상이 섞여 있다. 방송을 보면서 중간에 인기 탭을 왔다 갔다 하며 순위 변동을 체크해야 오늘의 재밌는 방송을 찾을 수 있다는 구조다. 실시간 감시는 이미 익스텐션으로 해뒀으니, 이번엔 데이터를 쌓아서 시간대별로 순위 흐름을 볼 .. 2026. 3. 24.
(기록용) 웹서비스들을 개발하면서 느낀 개인 생각 목차 내가 만들고 싶은 웹서비스들을 본격적으로 개발해본 지 거의 한 달이 되어간다. 짧다면 짧은 시간이지만 그 안에서 꽤 많은 것들이 바뀌었다. AI 툴 사용법, rules 적용 방식, 개발 흐름 전반이 달라졌고, 지금은 그 과정을 기록해두려 한다. 바이브코딩과 Rules, 생각보다 중요했다원래는 Cursor를 메인으로 쓰고 있었다. 그런데 어느 순간부터 Pro 플랜임에도 불구하고 토큰 부족 현상이 생기기 시작했다. 쓰다 보면 중간에 막히는 그 답답함이 꽤 컸다.그래서 찾은 대안이 Zai였다. 각 툴이 부족할 때마다 돌려가면서 쓰는 전략이었는데, 사실 이게 꽤 피곤한 방식이다. Cursor 쓰다 막히면 Zai 켜고, Claude 열고. 오히려 컨텍스트 전환 비용이 더 들었다.그러다 Claude Code를.. 2026. 3. 22.
(기록용) 개인적인 바이브코딩 세팅 및 진행방법 목차 요즘 사용하고있는건 Claude요즘은 cursor와 claude중에 cursor의 결제를 끈혹 claude만 사용하고있다 그 과정에대해 적어보려고한다. AI가 자꾸 내 가원하는 코드스타일을 준수하지 않아보통 이런 케이스는 rules를 지정해주지 않은 경우이다. 클로드의경우 rules를 통해 규칙을 정해줄수있는데rules를 지정해주지 않으면 아무리 똑똑한 모델이여도 뭘해줘야하는지 모르기때문에 기대값이 높은 대답을 할수 밖에없는데아래 처럼 rules를 지정해주면 내가원하는 규칙을 설정해두었기때문에 ai가 읽고 맞게 작성을 해준다.아래에 내가쓰는 rules랑 그 파일 하나 예시를 넣어두었ㄷ다. 개발 진행하는방법여러가지 AI활용법을 고민하고있는데 일단 다음과같은 방법으로 진행을해보고 있다.바이브코딩을 .. 2026. 3. 21.
(웹) Popoll 서비스를 만들다 목차 무슨서비스인가?https://www.popoll.live/ Popoll불러오는 중...www.popoll.live버블투표로 기존의 투표에서 좀더 가시적인게 있으면 어떨까하고 생각해본 비쥬얼 투표 서비스 이다. 어떤 기능을 하는가? 투표만들기우측상단의 투표만들기를 통해서 주제별로 투표를 만들 수 있다. 투표 대상은 맥스 60명이고 이미지를 넣어 표현이 가능하다 투표하기기능은 간단한데 웹사이트 투표방에있으면 실시간으로 누가 투표를 했는지 알수있고 인기순위에따른 버블크기로 보여준다아래는 명일방주: 엔드필드라는 게임인데 그 투표의 결과 모습이다. 1등인 로시가 크기가 커져있는모습 투표 받은수만큼 크기가 차이나기때문에 차이가 커질수록 더 커진다. 2026. 3. 17.
내가 쓰고있는 바이브 코딩 방법 바이브 코딩 생존 전략: Cursor, Claude Code, Z.ai 혼합 사용법 및 꿀팁1. 서두: 나만의 바이브 코딩 워크플로우 기록본 포스팅은 현재 제가 실무에서 활용하고 있는 바이브 코딩(AI 기반 코딩) 방식과 효율적인 AI 도구 세팅법을 문서화한 기록입니다. AI 툴 선택과 비용 효율성, 그리고 작업 안정성을 고민하는 개발자분들께 도움이 되길 바랍니다.2. 효율적인 AI 작업 환경을 위한 Rules 세팅AI가 프로젝트의 맥락을 정확히 파악하게 하려면 기본적인 가이드라인(Rules) 세팅이 필수입니다. 저는 제가 다니는 회사에서 직접 만든 Blastlabs에서 제공하는 유틸을 활용합니다.2-1) 사내 개발용 라이브러리 설치프로젝트의 성격에 따라 개별 설치 또는 전역 설치를 진행합니다.프로젝트별.. 2026. 3. 8.
(익스텐션) 인기방송top10을 추적하는 chzzk-watcher를 만들다. 목차 실제 배포한 익스텐션https://chromewebstore.google.com/detail/chzzk-watcher/ipdmnoiimipnclfioflkkgcgmahabooe?authuser=0&hl=ko chzzk-watcher - Chrome 웹 스토어치지직 알림 크롬 익스텐션chromewebstore.google.com 그래서 무슨 프로그램인데?Chzzk이라는 네이버 인터넷 방송 플랫폼이 존재한다https://chzzk.naver.com/ 치지직 CHZZK지금, 스트리밍이 시작됩니다. 치지직-chzzk.naver.com인방을 이용하면서 가끔 아쉬웠던점이 있는데 그거는 내가 팔로우를 하지않은 사람이 인기방송이 되어서 재밌는 모습을 보여주는 경우가 있었던 것이다. 그것을 체크하기위해서는 .. 2026. 3. 7.
(기록용) 바이브코딩 앞으로의 계획 목차 더많은 에이전트를 사용하기처음엔 커서가 나와서 커서를통한 개발을했었는데 어느순간부터 커서의 사용량 제한이 강화가된건지 커서만으로 부족해지기 시작했다 그래서 claude code를 기웃거리게되고 거기서 pro플랜을 결제해서 총 2가지가 되었다. 그러다 claude code의 퀄리티가 더 좋은거 같다라는 것을 느끼고 금전적으로 비용을 아끼기위해 cursor를 플랜을 해지하게 되었는데claude code를 혼자서 쓰다보면 5시간마다 제한이 걸린다 그래서 5시간 제한이걸리면 아무것도 못하기 때문에 zai를 추가로 결제해서 5시간마다 서로 돌아가면서 쓰는 방식으로 하면 되겠다! 생각을 했는데 claude코드가 5시간 제한이 풀렷음에도 막히는 것을 보고 사용량을 보니 주간 코드 제한이 있다는 것을 발견했다(5.. 2026. 3. 6.
웹) 서브컬처 게임 명조에 대한 사이트를 만들다. 목차 왜 만들게 되었나?요즘 즐겨하는 게임인 명조라는 게임에서 특정한 불편함이 발견되었는데 그 불편함을 해결할 수 있을꺼 같아서 개발하게되었다.바이브코딩과 내 개인 개발지식을 합쳐서 만들었고 프론트엔드 개발자이지만 백엔드도 공부하는 경험과 실제 사이트 운영의 기회를 둘다 잡을 수 있는 좋은 기회라고 생각하여 개발을 진행해보려고한다. 하면서 시간이난다면 간간히 해당 프로젝트에대한 내용도 적지 않을까싶다 사이트 링크https://www.wuwa-helper.com/ WuWa Helper - 워더링 웨이브 프로필 카드 메이커내 캐릭터/무기 보유 현황을 이미지로 만들어 어디서나 공유하세요.www.wuwa-helper.com 2026. 3. 3.
(기록용)바이브코딩 동일한 결과를 내기위한 연구(cursor, claude) 목차 시작하게 된 계기내가 지금 다니고 있는 회사는 SI로써 다양한 도메인을 이용한 프로젝트를 만들게된다 그러다보니 유틸들도 많이 만들게되는데 이게 각 프로젝트마다 다르다보니 같은 질문을하더라도 다른 결과를 내는 경우가 있는데 cursor와 claude를 번갈아가면서 쓰다보니 서로 다른 결과를 뽑는 경우도 있엇다. 그 부분을 해결하고자 하였다. .claude, .cursor를 활용하자https://code.claude.com/docs/en/memory#organize-rules-with-claude%2Frules%2F How Claude remembers your project - Claude Code DocsGive Claude persistent instructions with CLAUDE.md .. 2026. 3. 2.
(기록용) 크롬 익스텐션에서 각 무슨역할들을 할수 있을까? - 1 - (background, content, popup) 목차 익스텐션의 많은 기능들크롬 익스텐션은 우리가 아는 웹사이트와 개발이 조금 다르다. 익스텐션은 브라우저 자체에 기능을 추가하는 거다보니, 여러 상황에서 다르게 동작을해야하기 때문이다크롬 익스텐션의 주요 구성요소:├── Background # 브라우저 백그라운드에서 조용히 실행├── Content Script # 웹페이지 위에 내용을 추가├── Popup # 익스텐션 아이콘 클릭 시 나타나는 창├── Options # 설정 페이지├── Dashboard # 큰 화면에서 작업하는 페이지├── New Tab # 새 탭을 열 때 보이는 페이지└── DevTools # 개발자 도구에 추가하는 패널 Background Script (백그라운드 스크립트) 무슨 일을 하는가?**뇌**의 역할을 수행한다. .. 2026. 2. 26.

티스토리툴바