Skip to content

프론트엔드

회사소개서를 보면 "노션이 바로 웹사이트가 되고, 회의 이야기가 마인드맵이 되는" 제품을 만든다고 적혀 있어요. 웹빌더에선 텍스트 하나가 곧 페이지 요소가 되고, 캔버스에선 드래그 하나가 곧 문서 구조가 되죠. 이런 제품의 성패는 결국 에디터급 프론트엔드에 갈립니다. 그냥 아름다운 화면을 그리는 게 아니라, 사용자가 만지는 모든 조각이 실시간으로 데이터와 연결되는 경험을 만들어야 해요.

상태 배지

이 위키에서는 기술마다 적용 정도를 배지로 표시합니다.

  • 🟢 운영 — 제품에 실제로 돌아가고 있는 기술
  • 🔵 적용 — 도입했거나 적용 중인 기술

프론트엔드 카테고리에서 React와 TypeScript는 🟢 운영, Vite는 🔵 적용 상태로 보고 있어요.

하위 기술 딥 페이지

프론트엔드의 핵심 세 기술은 각각 별도 페이지로 정리했어요.

  • React (🟢 운영) — 컴포넌트 단위로 화면을 쪼개고 상태가 바뀌면 그 부분만 다시 그리는 라이브러리예요. 에디터처럼 상태가 수시로 변하는 화면의 기준이 됩니다.
  • Vite (🔵 적용) — 개발 서버와 빌드를 매우 빠르게 해주는 도구예요. 파일을 고치면 바뀐 모듈만 즉시 반영(HMR)해서, 파일이 많은 에디터 프로젝트에서 기다림을 줄여줍니다.
  • TypeScript (🟢 운영) — 타입으로 도메인을 고정하는 언어예요. 프론트엔드 전체와 백엔드(NestJS)까지 아우르는 공통 언어죠. 자세한 내용은 languages.md에서도 다뤄요.

함께 쓰는 기술 (목차)

딥 페이지는 따로 없지만 같은 조합으로 묶여 쓰는 기술들이에요.

  • Zustand (🟢 운영) — 가볍고 직관적인 전역 상태 관리 라이브러리. 에디터처럼 여러 컴포넌트가 같은 문서 상태를 공유할 때 store 하나로 꺼내 써요. 공식 문서
  • Tailwind CSS (🟢 운영) — 유틸리티 클래스로 스타일을 쌓는 CSS 프레임워크. 클래스 이름 짓느라 고민할 필요 없이 컴포넌트가 많은 UI에서 빠르게 작업해요. 공식 문서
  • dnd-kit (🟢 운영) — 드래그 앤 드롭을 구현하는 라이브러리. 캔버스에서 노드를 옮기거나, 웹빌더에서 요소 순서를 바꿀 때 써요. 공식 문서

이 조합이 어떻게 묶여 쓰는지는 기술 스택 허브에서 이어집니다.

실제 적용

회사소개서 중심 조합은 React + Vite + TypeScript, 그리고 Zustand + Tailwind + dnd-kit로 묶여요. 에디터의 상태 관리가 Zustand, UI 표현이 Tailwind, 인터랙션이 dnd-kit이 나눠 맡는 구조죠.

  • D-SKET Webbuilder — Next.js + React + Tailwind + TypeScript + Three.js 조합. 페이지를 블록으로 쌓고, 실시간으로 결과를 미리보는 구조예요.
  • D-SKET Canvas — React + Vite 에디터. JSON Canvas 포맷으로 캔버스 노드를 그리고, dnd-kit으로 노드를 옮기고, 실시간/비동기 협업으로 여러 사용자가 같은 캔버스를 함께 편집합니다.

E2E 검증은 Playwright가 맡고 있어요. 프론트엔드 품질의 일부로 보고 있죠. 자세한 테스트 흐름은 테스트·품질 페이지에서 이어집니다.

더 알아보기