4주간의 여정: 프론트엔드 업그레이드에서 Docker 고난과 돌파구까지

업데이트 (2026): 아래에 설명된 WordPress 프론트엔드와 Docker 배포는 이제 옛날 이야기입니다. 사이트는 이제 Next.js로 운영되며, Sydney는 Supabase pgvector와 Claude로 처음부터 재구축되었습니다. 여전히 코딩 중이고, 여전히 배우는 중입니다.

Sydney에게 물어보기 →

---

2024년 3월 원본 글은 맥락을 위해 아래에 보존됩니다.

지난 4주간 글을 게시하지 않았습니다. 무슨 일이 있었는지 궁금하실 수 있습니다. 게을러져서 학습을 멈춘 건가요? 글쎄요, 어느 정도는 그렇습니다. 어느 주말에 가족과 친구들과 함께 여행을 다녀왔습니다.

오늘 글은 짧게 가겠습니다. 지난 4주간 배운 것들을 공유하겠습니다. 누가 신경 쓰냐고요? 아무도 신경 쓰지 않는 것이 사실이므로 이 글은 주로 제 진행 상황을 추적하기 위한 것이고, 그리고 아마 한 명 더 (당신이 누구든 :D.)

TL;DR: "적시 학습(Just in time learning)"은 실제이며 저는 그것을 살고 있습니다.

개선된 프론트엔드

몇 달 전에 제 사이트를 방문하셨다면, 지금은 사이트가 다르게, 더 현대적으로, 탐색하기 쉽게 보인다는 것을 알아차리셨을 것입니다 (그러길 바랍니다). Github Copilot과 ChatGPT4를 사용하여 사이트의 외관과 느낌을 개선하는 것을 도와달라고 요청했습니다. 결과는 300줄 이상의 CSS 코드로, 대부분 제가 작성할 줄 모르는 것입니다. 미리보기입니다:

/* Defining CSS variables for common values */
:root \{
    --main-font: 'Poppins', sans-serif; /* Main font for the website */
    --primary-color: #003366; /* Primary color for text */
    --accent-color: #4da6ff; /* Accent color for links and buttons */
    --background-color: #FAFAFA; /* Background color for the body and some elements */
    --text-color: #333333; /* Main text color */
    --hover-color: #4da6ff; /* Color for hover effects */
\}

/* Applying the main font and color to various elements */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .nav-menu, .nav-menu a, .widget-title, .page-numbers.current,
#primary-menu .menu-item a, #primary-menu .sub-menu .menu-item a, .site-title a, .primary-navigation a, .widgettitle, .simpletoc-title \{
    font-family: var(--main-font);
    color: var(--text-color);
\}

또한 챗봇 페이지를 방문하면 "룩 앤 필"이 사이트의 나머지 부분과 비슷합니다. 질문 입력 "박스"가 바로 위쪽, 스크롤 없이 보이는 곳에 있고 대화가 확장됨에 따라 대화 상자가 계속 확장됩니다. 이것을 더 일찍 하지 못한 것이 믿기지 않습니다. 그리고 이전에 그 페이지를 방문한 모든 분들께 죄송합니다.

Sydney 챗봇이 새로운 벡터 저장소와 개선된 쿼리 변환을 갖추었습니다

Wordpress에서 게시된 콘텐츠를 내보내고 HTML 정리, 청킹, 임베딩 생성, 벡터 저장소에 저장하는 전체 과정은 몇 번 해보면 놀라울 정도로 쉽고 빠릅니다.

새로운 벡터 저장소(여전히 FAISS 사용)로 교체했으며, 다른 청킹 방법론(이번에는 약간 더 큰 청크 크기와 오버랩)을 사용했습니다.

사용자의 쿼리는 Langchain의 다중 쿼리 검색기를 사용하여 변환됩니다. 이 검색기를 사용한 챗봇의 답변이 이전 검색기보다 더 포괄적이고 미묘하다는 것을 발견했습니다.

# Set up vector store and llm
embeddings = OpenAIEmbeddings()
vectorstore = FAISS.load_local("faiss_index", embeddings)
llm = ChatOpenAI(model_name="gpt-3.5-turbo-0125", temperature=0)

# Set up retriever
retriever_from_llm = MultiQueryRetriever.from_llm(
    retriever=vectorstore.as_retriever(), llm=llm
)

Docker 이미지를 GCP Artifact에 푸시하는 데 어려움을 겪은 것이 축복이 되었습니다

이상하게도, 약 1달 전부터 Docker Image를 GCP Artifact에 푸시하는 데 문제가 생기기 시작했습니다. 여러 방법으로 해결하려 했지만 할 수 없었습니다. 그 시점까지 몇 달 동안은 완전히 문제없었습니다.

그 때문에, 이미지를 Artifact에 푸시하지 않는 다른 배포 방법을 생각하게 되었습니다. 그래서 Github의 저장소를 사용한 GCP Cloud Run의 지속적 배포를 알게 되었습니다.

동시에 우연히 온라인 튜토리얼을 보았는데 poetry를 사용하고 있었습니다. 그것이 뭔지 몰라서 chatGPT에게 설명해달라고 요청했습니다. 의존성을 관리하는 훌륭한 도구라는 것이 밝혀져 이제 사용하고 있습니다 :). 이 탐험 덕분에 각 프로젝트에 가상 환경을 설정하는 것에 대해서도 더 배웠고, 모든 프로젝트에 사용하기 시작했습니다.

이제 새로운 가상 환경 설정, poetry로 의존성 관리, GCP Cloud Run의 지속적 배포를 활용하면서 제 워크플로우가 훨씬 원활해졌습니다. 챗봇의 새로운 업데이트를 배포하는 것도 로컬에서 철저히 테스트한 후에는 훨씬 쉽고 빨라졌습니다.

현재 무엇을 작업 중인가요?

현재 Langchain을 사용한 리서치 어시스턴트를 구축하고 배포하는 작업을 하고 있습니다. Langchain과 GPT-Researcher (감사합니다!)의 오픈소스 코드는 충분히 명확하고 로컬에서 작동하게 할 수 있습니다. 그러나 프로덕션 환경에서 작동하도록 배포하는 것은 꽤 어려운 것으로 밝혀졌으며, 특히 콘텐츠 스크래핑 부분이 그렇습니다. 구체적으로, Docker Container에서 로컬 테스트 시 CPU 사용량이 너무 높습니다.

GPT-researcher와 Langchain이 공유한 리서치 어시스턴트 접근 방식을 개선하는 몇 가지 아이디어도 있지만, 실현시키기 위해 작업해야 합니다. 준비되면 더 공유하겠습니다.

여러분의 생각은?

모든 코드 한 줄, 모든 문제 해결 시간, 모든 돌파구가 디딤돌이었습니다. 이 여정이 저의 것이지만, 아이디어를 불러일으키거나, 통찰을 제공하거나, 단순히 즐거움을 주길 바랍니다. 기술 관련 시도에서 어떤 도전에 직면하셨나요? 아래에 이야기나 질문을 남겨주세요 – 함께 이 디지털 바다를 항해합시다.

감사합니다,

Chandler

추신: RAG 애플리케이션을 구축 중이시라면, Langchain의 "RAG from scratch" 시리즈가 매우 유용하다고 생각합니다.