misung.dev

들어가기 전에

전략기획팀에서의 인턴 업무를 마친 뒤, 감사하게도 리더분의 추천으로 IDE Squad에서 새로운 기회를 이어갈 수 있었습니다. IDE Squad는 Studio와 Console로 나뉘는데, 저는 그중 Studio 팀에서 IDE 내부 개발을 맡아 참여하게 되었어요.

IDE는 난이도가 높은 분야라고 익히 들어온 터라 쉽지 않은 도전이었지만, 그만큼 개발자로서 성장하고 많은 것을 배우는 시간의 연속이었습니다 :)

담당 업무

어떤 업무를 담당했는지 간단히 정리해 보았어요.

1) Socket 통신 기반으로 실시간 경로·파일명 포함/제외 지정 기능을 적용해 `Replace` 기능 개선

이슈: Replace 기능 수행 시, Paths/Files to Search/Exclude에 입력한 항목들이 정상적으로 반영되지 않아 치환 대상에서 제대로 포함/제외되지 않는 문제가 발생함
해결 방법:
- IDE 특성상 치환은 실시간으로 이루어져야 하므로, Socket 호출 시 누락되었던 사용자 입력값을 함께 전달하도록 수정
- 파일 필터링 및 치환 로직을 파이프라인 구조로 재구성하고, 명령어 조합 방식으로 개선
추가 이슈 1) Replace 기능 내 특수문자 치환 오류를 정규식 이스케이프 처리로 개선
- 원인: 메타문자에 대한 이스케이프 처리가 누락되어 올바르게 치환되지 않음
- 예시
  
  치환 대상 기대 결과 실제 결과 (문제 발생)
  (테스트) ((테스트)) (((테스트)))
  () ** **(**)**
- 해결 방법: 유틸 함수를 추가해 치환 대상과 치환어 모두에 대해 정규식 이스케이프를 수행하도록 개선
추가 이슈 2) Replace 기능 내 일부 특수문자 치환 오류
- 원인: 검색어/치환어에 포함된 따옴표(', ")나 역슬래시(\)가 문자열 제어 문자로 해석되어, 이스케이프되지 않아 올바르게 치환되지 않음.
- 예시
  
  치환 대상 기대 결과 실제 결과 (문제 발생)
  '치환’ "치환” '"치환"’
- 해결 방법: Perl 정규식에 전달되는 문자열의 특수문자를 이스케이프(백슬래시 추가)하는 유틸 함수를 구현해 적용

치환 대상	기대 결과	실제 결과 (문제 발생)
`(테스트)`	`((테스트))`	`(((테스트)))`
`()`	`**`	`()**`

치환 대상	기대 결과	실제 결과 (문제 발생)
`'치환’`	`"치환”`	`'"치환"’`

2) LLM 채팅 목록에 가상화를 적용해 렌더링 속도 개선

이슈: 사이드챗에서 LLM agent의 응답이 길 때 LLM 사이드챗 메시지 목록 렌더링 지연 문제 발생하는 프론트엔드 렌더링 성능 저하 문제
해결 방법:
- 가변 높이 항목도 별도 계산 없이 자연스럽게 지원하는 react-virtuoso 가상화 라이브러리 적용
- 스크롤 시 화면에 보이는 영역뿐 아니라 위·아래 일정 범위를 미리 렌더링(overscan)하도록 가상 스크롤링 구현
고려했던 다른 가상화 라이브러리
- react-virtualized: 최신 대안(react-window, react-virtuoso)에 비해 라이브러리 크기가 커요.
- react-window: 일부 기능에 해당 라이브러리를 적용했지만, 이 기능에는 적합하지 않다고 판단했어요.
  - LLM 답변의 특성상 채팅 목록의 높이가 가변적임
  - VariableSizeList를 사용할 경우 항목별 높이를 반환하는 함수를 직접 구현 필요
  - 이를 위해 각 메시지 DOM 요소의 height를 측정하거나 별도로 저장·관리해야 하므로 구현이 복잡해지고 성능에도 부담이 될 수 있음
구현 결과: 55개의 채팅 목록 중 보이는 영역과 앞뒤 가상 스크롤링 범위만 DOM에 렌더링되도록 최적화함

3) 터미널 에러메세지 및 출력로그 ↔ 사이드챗 연동

기획 의도: 터미널에서 발생하는 오류를 빠르게 이해하고 해결할 수 있도록 돕기 위함
사용자 흐름: 터미널에서 특정 오류 메시지가 감지되면 화면 상단에 Fix in Chat 버튼이 표시된다. 사용자가 이 버튼을 클릭하면 해당 메시지가 사이드챗으로 전달되고, 사이드챗을 통해 원인 분석과 해결 방법을 안내받을 수 있다.
작업 내용:
- 킥오프 회의 참여
- 디자인 시스템의 버튼, 툴팁 등 컴포넌트를 활용해 화면 UI 구현
- 터미널에서 전송된 오류를 사이드챗에 표시하는 UI 구현
- 터미널과 사이드챗 간 연동 기능 개발
- 로그 기록을 위한 DB 데이터 삽입
- 사용자에게 오류의 원인과 해결 방법을 안내하기 위한 AI 프롬프트 작성
- 단축키 기능 추가
- 다국어 지원 적용

마치며

실제 배포까지의 전 과정을 경험할 수 있었던 소중한 시간이었어요. 개발을 하고 코드 리뷰를 거쳐 QA까지 마쳤을 때는 문제가 없을 것 같았지만, 막상 배포 이후에도 예상치 못한 이슈들이 이어졌고 그때마다 다시 수정하며 코드 리뷰와 QA를 반복했던 과정이 깊이 기억에 남습니다. 주어진 태스크는 이전에 해보지 않았던 영역이라 쉽지 않았지만, 선배 개발자분들의 도움 덕분에 하나씩 무사히 마무리할 수 있었습니다.

3개월이라는 기간 동안 개발에 참여하며 보람을 느끼고, 좋은 개발 문화를 배울 수 있었던 소중한 시간이었습니다 :)