Sia Portfolio

✏️ 리치 에디터

Quill.js 기반의 에디터를 적용 및 커스터마이징하여, 다양한 포맷의 텍스트 입력, 편집, 수정 기능을 확장하고, 기존의 단순 텍스트 메시지에서 richText 메시지 구조로 전환하였습니다.

🗓️ 개발 기간
- 2024.02(검토) ~ 2024.07(후속)
🛠️ Tech Stack
- Quill.js, JavaScript, Angular.js
📌 What did I do
- Quill.js 커스터마이징 및 기능 확장
  - customBlot 구현: 멘션, 커맨드, 링크 기능 추가
  - 툴바 UI 개발: 고정형/플로팅형 툴바 설계 및 적용
  - Copy & Paste 개선: 리치 텍스트, 엑셀, PPT, HTML 등 다양한 포맷 복사 및 붙여넣기 지원
  - 키보드 바인딩 작업을 통해 UX 향상
- 플랫폼 공통 컨버터 개발
  - 플랫폼 간 확장을 고려한 순수 JavaScript 기반 공통 컨버터 모듈 개발
  - richText 데이터 규약 정립 및 적용
    - richText → delta 변환
    - delta → richText 변환
    - richText → plainText 변환
- 메시지 렌더링 및 편집 기능 개발
  - 기존 단순 텍스트 메시지를 richText 구조로 전환, 메세지 렌더링 컴포넌트 설계 및 구현
  - 편집 기능 연계 개발 : 렌더링된 메시지를 자연스럽게 편집할 수 있도록 구성

😵‍💫 메시지 챗뷰 성능 최적화(리액션)

리액션 기능 도입 이후 발생한 메시지별 버블 메뉴 렌더링 구조의 성능 이슈를 개선하여, 메모리 사용량을 75% 절감(최대2GB → 500MB) 하고, 프리징 없이 안정적인 동작을 구현했습니다.

🗓️ 개발 기간
- 2023.11
🛠️ Tech Stack | JavaScript, Angular.js
📌 What did I do
- 버블 메뉴 렌더링 방식 변경
  - 기존
    - 모든 메시지에 버블 메뉴가 미리 DOM에 렌더링된 상태에서 숨김 처리(show/hide) 방식으로 동작
    - 메시지가 많아질수록 불필요한 DOM 요소가 증가하여 성능 저하 발생
    - 특히 메시지를 빠르게 입력할 경우, 메모리 사용량이 점점 쌓이며 최대 2GB까지 증가, 일시적인 프리징(1~2초간 정지) 현상이 발생하는 문제가 있었음 (동영상 참고)
  - 개선
    - 메시지마다 메뉴를 렌더링하지 않고, 버블 메뉴 인스턴스를 하나만 유지
    - 호버 시 HTML 템플릿을 동적으로 컴파일하여 append/remove 처리
    - 불필요한 요소가 쌓이지 않아 메시지 수에 관계없이 일정한 성능 유지, 불필요한 DOM 쌓임을 방지하고 메시지 수와 관계없이 일정한 성능 유지
  - 개선방식에 따른 추가 문제 및 해결
    - 버블 메뉴가 메시지 DOM 외부(root 상단)에 렌더링되는 구조였고, 메시지 버블에 mouseover/mouseout 이벤트가 설정되어 있어 사용자가 메뉴로 마우스를 옮기는 순간 메시지에서 호버가 해제되어 메뉴가 바로 닫히는 UX 이슈가 발생
    - 해결:
      - directive 대신 전역 service로 관리하여 단일 인스턴스로 버블 메뉴 관리
      - 현재 마우스를 올린 대상이 기존에 열린 메시지와 동일한 경우에만 메뉴를 유지하고, 그렇지 않을 경우 DOM에서 즉시 제거하여 불필요한 렌더링도 함께 차단
🏆 성과
- 대량 메시지 입력 시에도 렌더링 지연 및 프리징 현상이 발생하지 않도록 구조 개선
- 메모리 사용량 75% 절감(2GB → 500MB)으로 성능 및 안정성 향상
- 실제 운영 환경에서 사용자 입력에 대한 응답 속도 향상 및 UX 개선 효과 확인

😀 리액션 멤버 리스트 컴포넌트 개발

리액션한 멤버 리스트 컴포넌트를 개발하였습니다.

🗓️ 개발 기간
- 2023.08 ~ 2023.09
🛠️ Tech Stack
- JavaScript, Angular.js
📌 What did I do
- 리액션 멤버 리스트 컴포넌트 개발
- 기존 챗뷰(Chat View)에 적용된 리액션 메뉴를 디테일 뷰(Detail View)에 적용

🗓️ 캘린더 모달 리팩토링 및 공통 컴포넌트화

여러 작업자에 의해 다르게 구현된 캘린더 모달의 일관성과 유지보수 문제를 인지하여, 공통 컴포넌트로 정리하여 일관된 UI/UX를 제공하고 유지보수성을 개선했습니다.

🗓️ 개발 기간
- 2023.06
🛠️ Tech Stack | JavaScript, Angular.js, SCSS, Angular-ui-bootstrap.js
📌 What did I do
- 캘린더 공통 컴포넌트 개발
  - 기존 개별적으로 구현된 캘린더 인풋을 재사용 가능한 공통 컴포넌트로 분리
- UI/UX 가이드라인 통합 적용
  - 각기 다른 정책 및 스타일을 하나로 통합하여 일관된 UX 제공
- 퍼블리싱 작업

🔍 대화방 날짜 검색

대화 기록에서 원하는 날짜를 빠르게 찾기 어려운 문제를 해결하기 위해, 시스템 메시지에서 날짜를 선택하면 해당 날짜로 스크롤 이동하는 캘린더 컴포넌트를 개발하였습니다.

🗓️ 개발 기간
- 2023.04 ~ 2023.05
🛠️ Tech Stack | JavaScript, Angular.js, SCSS, Angular-ui-bootstrap.js
📌 What did I do
- 날짜 기반 대화 검색 컴포넌트 개발
  - 시스템 메시지의 날짜 클릭 시 캘린더가 열리고, 해당 날짜의 대화가 존재하는 위치로 자동 스크롤 이동되도록 구현
- 타임스탬프 기반 유연한 이동 로직 구현
  - 선택한 날짜에 메시지가 없는 경우, 가장 인접한 대화로 자연스럽게 이동 처리
- 퍼블리싱 작업 및 컴포넌트 개발
🏆 성과
- 과거 대화 검색 과정에서의 불편함 해소, 사용자 탐색 시간 절감
- 운영 중 사용자 피드백을 통해 날짜 기반 검색 기능에 대한 만족도 향상 확인
  - 특정 날짜에 대화 기록이 없을 경우, 가장 가까운 메시지로 자동 이동하도록 구현

👥 다중멤버 내보내기

토픽 내 다중 멤버 일괄 내보내기 기능을 구현하고, 대량 처리에 따른 서버 부하 문제를 팀원들과 논의하여 최적화했습니다.

🗓️ 개발 기간
- 2023.03 ~ 2023.04
🛠️ Tech Stack | JavaScript, Angular, SCSS
📌 What did I do
- API 호출 흐름 개선
  - 토픽 정보 변경 → 멤버 내보내기 → 권한 변경 순서로 비동기 요청 순서를 제어하여 안정성 확보
  - 5000명 이상의 대량 사용자 처리 시 1000명 단위로 요청을 분할하여 서버 과부하 방지
- 멤버 피커 컴포넌트 개발 및 퍼블리싱

📨 매세지 예약 발송

메시지를 미리 예약하고 등록·관리할 수 있는 기능을 개발했습니다.

🗓️ 개발 기간
- 2022.11 ~ 2022.12
🛠️ Tech Stack | JavaScript, Angular.js, SCSS
📌 What did I do
- 파일 업로드 컴포넌트 구조 개선
  - 기존에는 특정 컴포넌트에 종속되어 있어 재사용성과 확장성이 제한됨
  - 독립적인 파일 업로드 모듈로 분리하여 재사용성을 높이고 유지보수 용이하도록 개선
- 소켓 미사용 방식으로 비동기 처리 개선
  - 예약 메시지 추가 시 불필요한 API 호출 없이 즉시 클라이언트에 반영하도록 개선
- 퍼블리싱 작업

🔌 커넥트

커넥트 페이지 퍼블리싱 및 다크 모드 대응을 위한 디자인 시스템과 SCSS 테마 시스템을 설계·구축하였습니다.

🗓️ 개발 기간
- 2022.04
🛠️ Tech Stack | React, SCSS
📌 What did I do
- 디자이너와 협업하여 다크 모드 대응 디자인 시스템 정립
  - 배경/텍스트 컬러, 명도 대비 등을 고려해 컬러 1:1 매핑 기준을 수립
  - “이 색에는 반드시 이 컬러가 대응된다”는 컬러 토큰 전략 정의 및 SCSS 변수화
- SCSS 기반 다크 모드 테마 시스템 설계
  - $themes 맵과 Mixin을 활용한 테마 분리 및 유지보수 구조 구축
  - 다크/라이트 모드 전환 시 UI 충돌 없이 안정적으로 스타일 적용 가능하도록 구현
- 커넥트 페이지 퍼블리싱 및 반응형 대응
🏆 성과
- 디자인 시스템과 테마 시스템을 정립함으로써 일관성 향상
- 다크 모드 퍼블리싱을 변수 기반으로 처리 가능해져, 작업 속도 및 확장성 향상

JNIUI22 - 디자인 개편

UI 개편이 이루어지는 프로젝트에서 퍼블리싱 작업

🗓️ 개발 기간
- 2022.05 ~ 22.07
🛠️ Tech Stack | AngularJS, SCSS
📌 What did I do
- 웹 클라이언트 퍼블리싱 작업
- 디자인 시스템을 반영하여 컴포넌트 스타일 개선
- 레거시 CSS 정리 및 불필요한 스타일 제거하여 코드 최적화