DEV PLATFORM

모두의
공식 문서

DocshunD

DocshunD Dashboard
IT공식 문서 공동 번역 및 커뮤니티 🏆SSAFY 우수상 수상
2025.01.06 ~ 02.21 (7주)
6명 (프론트엔드 3, 백엔드 3)
프론트엔드, UI/UX디자인
Java, React, MySQL, Spring Boot, JPA

언어 장벽을 넘어 지식을 나누다

IT공식문서를 한국어로 함께 번역하는 공간과 국내 개발자들과 함께
공식문서와 기술에 대해 이야기할 수 있는 커뮤니티를 제공하여
영어 장벽으로 인한 정보 격차를 해소합니다.

01. MISSION & VISION
Docshund Home

지식의 장벽을 허무는,
모두를 위한 기술 커뮤니케이션

DocshunD는 혼자 읽기 힘든 방대한 공식 문서를 개발자들이 힘을 합쳐 번역하고, 실시간으로 질문과 답변을 주고받으며 함께 성장하는 공간입니다.

Problem

높은 언어 장벽과
파편화된 번역 정보

영어 울렁증 부정확한 자동 번역
Solution

집단지성을 통한
신뢰할 수 있는 공동 번역

문단별 번역 투표 함께 만드는 지식
02. SITE STRUCTURE

서비스 구성도 및
담당 개발 파트

Docshund
메인화면
번역문서
문서목록
베스트 번역보기
문단별 번역제안
문단별 번역기록
챗봇
번역 문서별 채팅
커뮤니티
게시글 목록
게시글 상세
게시글 작성/수정
댓글
대댓글
알림
헬프데스크
공지사항
문의
신고
유저페이지
마이페이지
프로필편집
나의 활동 / 보관함
메모장 / 나의문의
로그인/아웃
회원탈퇴
관리자
회원관리
신고관리
문의관리
문서등록
공지사항 등록
03. TRANSLATION

혼자가 아닌 집단지성으로,
가장 완벽한 번역을 완성합니다

Translation System

문단별 번역 제안

문서 전체가 아닌 문단 단위로 쪼개어 번역을 제안할 수 있어 부담 없이 참여 가능합니다.

투표 기반 베스트 번역

가장 많은 추천을 받은 번역이 대표 번역으로 노출되어, 집단지성에 의한 품질 관리가 이루어집니다.

04. UTILITY

소통은 실시간으로,
기록은 더 확실하게

Realtime Chat

문서별 실시간 채팅

문서별 채팅방에서 문서를 보며 실시간으로 질의응답을 나눕니다.

STOMP.js
Markdown Memo

마크다운 메모장

번역 중 중요한 내용을 바로 기록할 수 있는 개인 메모장을 제공합니다.

React MD Editor
04. KEY CONTRIBUTIONS

기여의 핵심,
주요 기술적 기여

01

STOMP.js + SockJS 활용 실시간 다채널 채팅 구현

문서 ID를 WebSocket Topic으로 구독하는 Pub/Sub 구조를 설계하여 문서 독자가 서로 간섭 없이 독립적인 대화를 나눌 수 있는 실시간 채팅 서버를 구축했습니다.

STOMP.js WebSocket Pub/Sub
02

Axios Interceptor & Router Guard 기반 보안 시스템

Axios Interceptor를 통해 모든 요청에 JWT 토큰을 자동 주입하고, React Router Guard를 구현하여 권한이 없는 사용자의 접근을 확실히 차단해 안정적인 보안환경을 만들었습니다.

Axios Interceptor React Router JWT
03

Tailwind CSS 활용한 반응형 UI 시스템

프로젝트 전용 색상, 폰트를 정의하고, 이를 기반으로 모바일, 태블릿, 데스크톱 사이즈에 맞게 반응형 레이아웃을 일관성 있게 구현했습니다.

Tailwind CSS Responsive Design
04

QA 및 프로젝트 퀄리티 강화

정식 QA 3회, 외부 QA 진행 및 팀 내 전담 인원 배정을 통해 기능, 로딩, 예외 상황을 집중 검증했습니다. 특히 현업 QA 전문가의 검수를 통해 실제 서비스 수준의 완성도를 확보했다는 평가를 받았습니다.

QA User Experience
05. CHATTING

흐름은 끊김 없이,
사용자 경험은 더 섬세하게

다채널 구독 관리

문서 ID별로 고유한 Topic을 구독하며, 페이지 이탈 시 자동으로 구독을 해제하여 안정성을 확보했습니다.

실시간 다채널 소통

STOMP 기반의 구독 시스템으로 여러 방의 대화를 동시에 관리하고, 채널을 분리하여 독자 간 간섭 없는 소통 환경을 구축했습니다.

Chat Logic Mockup
Smart Scroll UX

내가 메시지를 전송하거나 이미 하단에 있을 때만 하단으로 자동 스크롤이 되도록 구현했습니다.

사용자 위치 보존

과거 메시지를 읽는 중에는 신규 메시지가 와도 스크롤이 고정되어 흐름을 방해하지 않도록 구현했습니다.

06. SECURITY

반복은 줄이고,
보안은 더 확실하게

AxiosInterceptor.jsx
// Axios Interceptor: 자동 토큰 주입 및 401 에러 통합 처리
const requestInterceptor = (config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
};

const responseInterceptor = (error) => {
  if (error.response?.status === 401) {
    // 전역 AuthStore를 통한 로그아웃 처리
    useAuthStore.getState().logout();
    window.location.href = "/";
  }
  return Promise.reject(error);
};
🛡️
인증 표준화

공통 인터셉터로 모든 API 요청의 보안 로직을 모듈화하여 관리 효율을 높였습니다.

자동 토큰 주입

모든 요청에 JWT를 자동 포함시켜, 반복되는 인증 코드를 효과적으로 줄였습니다.

07. RESPONSIVE UI

기기 제약 없이,
최적의 가독성을 보장합니다

Mobile View

Mobile View

PC View

Desktop View

Tailwind CSS의 유틸리티 클래스를 활용하여 모바일, 태블릿, 데스크톱 등 모든 디바이스 환경에 최적화된 반응형 레이아웃을 구현했습니다.

SSAFY 우수상 🏆

모두의 공식 문서,
DocshunD