사내 해커톤 후기

25년 6월 16일부터 6월 19일까지, 4일간 사내 해커톤 행사에 참여했다.
아직 초보 개발자라 '으악 내가 도움이될까?!' 하는 생각이 머릿속에 가득 했는데 내가 지금 당장 할 수 있는 것에 집중하고 힘써보려 했다.
레퍼런스 페이지들을 열심히 찾고, 프론트엔드 껍데기를 열심히 만들어서 나르고(?), 발표자료도 열심히 만들었다!
4일간 개발에 몰두했던 경험이 정말 값졌고, 같이 힘써준 팀원들에게도 정말 고마웠다. 
다들 차곡차곡 쌓은 자신의 전문성과 강점을 발휘하는 모습이 멋있었고 그걸 보며 자극을 많이 받았던 것 같다.
다 모르겠고 그냥 다들 자신만의 방법으로 최선을 다하여 공동의 목표를 이뤄내는 모습이 정말 멋졌다!!!!
 
맛있는 것도 많이 먹고!

 
 
일도 많이 했다!
(12시에 퇴근하며 찍은 사진)

 
 
퇴근 후 집에 와서도 코드를 생각하기도 했다.
(새벽 2시맞음)

 
 
정말 즐겁고 값진 경험이었다!
다들 즐거움을 기반으로 열심히 나아가고 있구나!
이번에 받은 자극들과 에너지로 나도 나의 길로 열심히 나아가야지
 
-
 
우리팀은 아래 프로그램을 개발했고
2등! 우수상!을 수상하여 상금 200만원을 받았다 희희... 
발표자 슨생님이 정말 조리있고 전달력 좋게 발표를 잘 진행해주신 덕분이다! 
다들 멋져 정말!

---

📄 기술 문서 번역 및 분석 AI 챗봇 서비스

---

안녕하세요! 복잡한 기술 문서 이해, 이제 쉽게 해결하세요. 기술 문서 번역 및 분석 AI 챗봇 서비스가 여러분의 시간과 노력을 아껴드립니다.

🚀 주요 기능

1. 📝 레이아웃 손실 없는 문서 번역:
   • 원본 PDF 문서의 표, 수식, 코드 블록, 그림 설명 등을 레이아웃 그대로 유지한 채 번역을 제공합니다.
   • 더 이상 번역본과 원본을 번갈아 볼 필요 없이, 한 번에 깔끔하게 이해할 수 있습니다.
2. 🤖 챗봇 기반 정보 탐색:
   • 번역된 문서 내용에 대한 요약, 키워드 추출, 질의응답, 핵심 분석을 실시간으로 제공합니다.
   • 문서의 궁금한 부분을 AI 챗봇에게 질문하여 빠르고 깊은 이해를 지원합니다.

🛠️ 사용 기술

• 🧠 LLM (Large Language Model) 기반 번역 엔진:
  • PDF 문서 구조를 정교하게 파싱하여 수식, 코드, 표 등 복잡한 요소들도 정확하게 번역하며 원본 레이아웃을 완벽하게 유지합니다.
• 🔍 RAG (Retrieval-Augmented Generation) 기반 챗봇:
  • 문서 내용과 맥락을 Vector DB에서 검색한 후 LLM으로 생성하여, 가장 정확하고 심층적인 정보와 분석을 제공합니다. 이는 단순한 정보 제공을 넘어 문맥에 맞는 실시간 질문과 답변을 가능하게 합니다.

💡 기대 효과 및 경쟁력

• 📚 사용자의 빠른 이해와 가독성 제공: 문서 번역 시 원본 레이아웃을 그대로 유지하여 사용자 경험을 최적화합니다.
• ⚡ 연구 및 업무 효율 극대화: RAG 기반 챗봇 연동을 통해 문서 내용에 대한 실시간 요약, 질의응답, 분석을 지원함으로써 시간 절약과 생산성 향상에 기여합니다.

이 서비스는 복잡한 기술 문서를 이해하는 데 드는 장벽을 허물고, 여러분이 핵심 지식에 더 깊이 집중할 수 있도록 돕기 위해 개발되었습니다. 지금 바로 경험해보시고, 기술 지식 습득의 새로운 지평을 열어보세요!
 
 
Mockup Page
- 완성본 아님! 완성본은 회사 Repo에 있어서 못 빼온다 흑흑 ㅠ

 
 

배우고 시도해본 것들

1) Shadcn
https://ui.shadcn.com/
: 이제는 익숙해져버린 shadcn ! 
 
2) magic ui
https://magicui.design/
: 노마드코더 유튭에서 알게된 animated component!
한번쯤 써먹어보고 싶었는데, 이번 해커톤 랜딩페이지 제작에 'Word Rotate' 기능과 Background 를 가져다가 적용해볼 수 있었다. 
너무 과한가? 싶었는데 해커톤에서 이목을 끌기엔 좋았다.
'진짜 파는 것 같아요!', '감성 개발자' 라는 피드백을 들었고 꽤나 기분이 좋았다! 히히 예쁜것이 최고야!
 
3) react-pdf 사용
https://github.com/eunjikangi/DDTHON25

GitHub - eunjikangi/DDTHON25: naparser

PDF 관련 기능을 써먹어보았다.
요것으로 해볼 수 있는 것들이 많을 것 같다! 
 
 
4) 로딩 페이지 아이디어
PDF 업로드 후, 번역된 PDF를 보여주기까지 시간이 좀 걸리기에 귀여운 로딩페이지
세상에 귀여운 로딩페이지가 정말 많다.
https://www.appcues.com/blog/loading-pages-design

Keep ‘em waiting: 7 loading page designs that make waiting (almost) fun

 
나는 이 귀여운 펭귄을 가져다가 썼다! 팔 아프지 않도록 성능 개선에 힘써볼게...

랜딩 페이지 GIF

 
 
5) 써먹진 못했지만 눈독 들이고 있는 3D 아이콘들
https://kr.freepik.com/free-photos-vectors/3d%EC%95%84%EC%9D%B4%EC%BD%98

3d아이콘 이미지 - Freepik에서 무료 다운로드

https://vision-coding.tistory.com/41

무료 3D 아이콘, 벡터, 일러스트 사이트

 
6) CopilotKit
https://docs.copilotkit.ai/

Introduction

Web에서 AI챗, MCP, RAG를 쉽게 사용할 수 있도록 만들어진 오픈소스!
우린 요 녀석을 사용하여 PDF 옆에 AI 채팅창을 붙였다. 
 
7) 마크다운 커스텀 및 URL 으로 PPT Page 이동기능 구현

---

CopilotKit의 Markdown 컴포넌트를 사용하면서 URL로 실제로 이동하지 않고, URL에 담긴 페이지 번호만 추출해서 특정 기능을 실행하고 싶으시군요! 이전 대화에서 언급했듯이, 이는 Markdown 컴포넌트가 내부적으로 사용하는 react-markdown의 components prop을 활용하는 방법으로 구현할 수 있습니다.
핵심은 Markdown 컴포넌트가 렌더링하는 <a> 태그의 기본 동작을 막고, 대신 우리가 정의한 함수를 호출하는 겁니다.
 

'use client';

import { AssistantMessageProps, Markdown } from '@copilotkit/react-ui';
import { useChatContext } from '@copilotkit/react-ui';

export const CustomAssistantMessage = (props: AssistantMessageProps) => {
  const { icons } = useChatContext();
  const { message, isLoading, subComponent } = props;

  // --- 베이스 URL 변수 설정 ---
  // 이 URL은 LLM이 생성하는 마크다운 링크에 사용될 기본 경로입니다.
  const BASE_REFERENCE_URL = 'https://your-document-server.com/docs/page/';

  // 메시지 텍스트 내의 [ref:숫자] 패턴을 마크다운 링크로 변환하는 함수
  const transformMessageForMarkdown = (text: string): string => {
    const regex = /\[ref:(\d+)\]/g; // [ref:숫자] 패턴을 찾습니다.

    const transformedText = text.replace(regex, (match, pageNumber) => {
      // 찾은 숫자(pageNumber)와 베이스 URL을 결합하여 실제 링크 URL을 생성합니다.
      const url = `${BASE_REFERENCE_URL}${pageNumber}`;
      // 마크다운 링크 포맷: [링크 텍스트](URL)
      return `[Page ${pageNumber}](${url})`;
    });

    return transformedText;
  };

  const processedMessage = transformMessageForMarkdown(message);

  // --- 페이지 번호를 받아 특정 기능을 수행하는 함수 ---
  // 이 함수는 실제로 URL로 이동하지 않고, 페이지 번호만 활용합니다.
  const handlePageNumberAction = (pageNumber: string) => {
    console.log(`URL 이동 없이 페이지 번호 '${pageNumber}'를 처리합니다.`);
    // 여기에 페이지 번호를 이용한 실제 기능을 구현하세요.
    // 예시: 특정 ID를 가진 요소로 스크롤
    const targetElement = document.getElementById(`document-page-${pageNumber}`);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      console.log(`'document-page-${pageNumber}' 요소로 스크롤했습니다.`);
    } else {
      console.log(`'document-page-${pageNumber}' 요소를 찾을 수 없습니다.`);
    }

    // 예시: 페이지 번호를 이용해 모달 열기 또는 다른 데이터 불러오기
    // openPageInfoModal(pageNumber);
    // loadContentForPage(pageNumber);
  };

  // --- Markdown 컴포넌트에 전달할 커스텀 렌더러 ---
  // 'a' 태그(링크)가 렌더링될 때 이 함수가 호출됩니다.
  const customMarkdownComponents = {
    a: ({ href, children, ...props }: any) => {
      // 1. 링크의 href가 우리가 정의한 BASE_REFERENCE_URL로 시작하는지 확인합니다.
      if (href && href.startsWith(BASE_REFERENCE_URL)) {
        // 2. BASE_REFERENCE_URL 뒷부분에서 순수한 페이지 번호를 추출합니다.
        const pageNumber = href.replace(BASE_REFERENCE_URL, '');

        return (
          <a
            href="#" // 실제 URL 이동을 막기 위해 href를 '#'으로 설정합니다.
            onClick={(e) => {
              e.preventDefault(); // <-- ★ 기본 링크 동작(URL 이동)을 명시적으로 막습니다.
              handlePageNumberAction(pageNumber); // 추출한 페이지 번호로 원하는 함수를 호출합니다.
            }}
            style={{
              cursor: 'pointer',
              color: '#007bff', // 링크 스타일 (원하는 대로 변경)
              textDecoration: 'underline',
              // 필요하다면 여기에 칩 스타일을 직접 적용할 수 있습니다.
              // 예를 들어, display: 'inline-flex', alignItems: 'center', 등
            }}
            title={`페이지 ${pageNumber} 정보 보기`}
            {...props} // 원본 <a> 태그의 다른 props를 전달합니다.
          >
            {children} {/* 링크 텍스트 (예: "Page 10") */}
          </a>
        );
      }
      // 3. 우리의 참조 링크가 아니라면, 기본 <a> 태그를 그대로 렌더링합니다.
      return <a href={href} {...props}>{children}</a>;
    },
  };

  const messageStyles = 'px-4 rounded-xl pt-2';

  return (
    <div className="py-2">
      <div className="flex items-start">
        {!subComponent}
        <div className={messageStyles}>
          {processedMessage && (
            // Markdown 컴포넌트에 커스텀 렌더러를 전달합니다.
            <Markdown content={processedMessage} components={customMarkdownComponents} />
          )}
          {isLoading && icons.spinnerIcon}
        </div>
      </div>
    </div>
  );
};

 

생각들

1) 발표
'말'이라는 것은 듣는이를 위한 것이다. 알맞은 속도로 내가 말하고자 하는 것을 잘 '전달'하는 것이 중요하다.
판단은 그들에게 맡기고! 나는 일단 자신감을 가지고 나의 프로젝트의 기능과 목적을 청자에게 잘 전달하는 것을 목적으로 하자! 
 
2) 떠오른 아이디어

• 퇴사 시뮬레이터
  : 이건 내가 제일 써먹고 싶은 기능이다. 막연한 경제적 불안감 때문에 퇴사를 망설이는 사람들이 많다. 나역시 그랬고!
  현재 내가 모은 돈, 정부 지원 정책, 연금, 씀씀이 등을 기반으로 생활비 계산 및 노후 자금 계산을 해주는 어플이 있으면 좋겠다.
  나만의 '최소비용'을 데이터 기반으로 알 수 있게 된다면 막연한 경제적 불안으로 부터 벗어날 수 있지 않을까! 
• 익스텐션
  : 여러 응용 프로그램으로 산재되어 있는 서비스들을 '익스텐션' 으로 만들면 편하겠단 생각을 했다. 디스코드 익스텐션도 있나? 하고 찾아봤는데 없넹! 크크
• 사내식당 API 활용하여 식단관리 서비스
  : 직장인의 최대고민은 바로 오늘 뭐먹지? 이다. 점심시간에 좀좀따리 API 가져다가 식단관리 서비스 만들어보면 재밌겠다!  

3) 얼마나 유용하냐? 실현 가능성이 있냐? 보다, '그래서 이게 있냐 없냐?' 를 따지는게 더 중요하겠다.
서비스를 기획하고 생산할 때, 얼마나 유용할지, 대단할지 검토를 먼저 하느라 사라지는 기능들이 많은 것 같다. 
뭔가 대단한걸 만들어야 한다는 생각때문에 아이디어 회의만 계속되고, 정작 풀어야할 간단한 문제들은 풀리지 않는 경우들이 빈번하게 발생한다. 
멋지고 대단한것도 물론 중요하지만, 당장 필요한 문제를 먼저 개선하는 것이 중요하단 것을 많이 깨달았다!
 
4) noCodeAI
n8n을 사용하여 서비스를 개발한 팀이 있었다. 굉장히 궁금해짐!
근데 너무 비싸다. 그냥 가내수공업 하는 걸로...
https://n8n.io/

n8n.io - a powerful workflow automation tool

 
 
5) 기술 스택/아키텍쳐 표현방법
정말 귀엽고 보기 쉽다!!!! 다음에 나도 써먹어야지

https://aws.amazon.com/ko/architecture/icons/

아키텍처 아이콘 페이지

https://www.drawio.com/

draw.io

 

 
6) 알게된 여러 기술들
GitHub MCP, STDIO, SSE, FastMCP, PySide6, OpenAI Agent SDK, APS Scheduler, LeRobot
이중에서 제일 기억에 남는건 LeRobot E2E LLM Open Source !!
https://huggingface.co/lerobot

lerobot (LeRobot)

---

LeRobot: 실제 로봇을 위한 최첨단 머신러닝

LeRobot은 파이토치(PyTorch) 기반으로 실제 로봇을 위한 모델, 데이터셋, 도구를 제공하는 것을 목표로 합니다. 로봇 공학 분야의 진입 장벽을 낮춰서 누구나 데이터셋과 미리 학습된(pretrained) 모델을 공유함으로써 기여하고 혜택을 받을 수 있도록 하는 것이 목표입니다.
LeRobot에는 **모방 학습(imitation learning)과 강화 학습(reinforcement learning)**에 중점을 둔, 실제 환경에 적용되는 것이 검증된 최첨단 접근 방식들이 포함되어 있습니다: github.com/huggingface/lerobot
LeRobot은 이미 미리 학습된 모델들, 인간이 수집한 데모(demonstrations)가 포함된 데이터셋, 그리고 시뮬레이션 환경을 제공하여 누구나 바로 시작할 수 있도록 돕습니다. 앞으로 몇 주 안에 가장 합리적이고 성능 좋은 로봇들을 위한 실제 로봇 지원을 점점 더 많이 추가할 계획입니다.
LeRobot은 허깅페이스(HuggingFace) 커뮤니티 페이지(huggingface.co/lerobot)에서 미리 학습된 모델과 데이터셋을 호스팅합니다.
 
 
끄읕!