docs: Update README.md

README.md

@@ -1,14 +1,10 @@
 <div align="center">
   <h1>Git Challenge</h1>
-    <p>Git을 사용하다 자주 만날 수 있는 상황을 문제로 풀면서 Git을 학습하는 서비스</p>
-
-
+
 ![Frame 30](https://github.com/boostcampwm2023/web01-GitChallenge/assets/79246447/fe5e7fbd-93fe-40ea-be09-a902b712f6c3)
-
-
 </div>
 
-> 배포 링크 <br/>
+> 배포 링크 <br />
 > **https://git-challenge.com/**
 
 <br/>
@@ -30,16 +26,79 @@
     <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm2023%2Fweb01-GitChallenge%2Fhit-counter&count_bg=%23FF7B5A&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com"/></a>
 </div>
 
+## 📄 목차
+
+- [📄 목차](#-목차)
+- [✍🏻 프로젝트 개요](#-프로젝트-개요)
+- [🚀 핵심 기능](#-핵심-기능)
+  - [자주 마주칠 수 있는 Git 문제를 해결해 보세요](#자주-마주칠-수-있는-git-문제를-해결해-보세요)
+  - [터미널 환경에서 Git을 조작할 수 있어요](#터미널-환경에서-git을-조작할-수-있어요)
+  - [Git 그래프로 변화되는 Git 상황을 확인할 수 있어요](#git-그래프로-변화되는-git-상황을-확인할-수-있어요)
+  - [문제 해결이 어렵다면 도움받을 수 있어요](#문제-해결이-어렵다면-도움받을-수-있어요)
+  - [정답을 맞추면 내 답안을 공유할 수 있어요](#정답을-맞추면-내-답안을-공유할-수-있어요)
+- [⚙️ 기술 스택](#️-기술-스택)
+- [🏛️ 시스템 아키텍처](#️-시스템-아키텍처)
+- [🔎 FE 기술적 도전](#-fe-기술적-도전)
+  - [디자인 시스템 구축](#디자인-시스템-구축)
+  - [컴포넌트 테스트 코드](#컴포넌트-테스트-코드)
+  - [D3를 이용한 데이터 시각화](#d3를-이용한-데이터-시각화)
+  - [UX 개선](#ux-개선)
+- [🔎 BE 기술적 도전](#-be-기술적-도전)
+  - [도커 컨테이너](#도커-컨테이너)
+  - [HTTP로 원격 터미널 조작하기](#http로-원격-터미널-조작하기)
+  - [Git editor 커스텀](#git-editor-커스텀)
+  - [채점을 위해 Jest를 쓰지 않은 이유](#채점을-위해-jest를-쓰지-않은-이유)
+  - [AI 시스템 프롬프트 설정하기](#ai-시스템-프롬프트-설정하기)
+- [🧡 팀원 소개](#-팀원-소개)
+
+<br />
+
+## ✍🏻 프로젝트 개요
+
+Git-Challenge는 사용자들이 git을 사용하며 발생할 수 있는 다양한 상황을 미리 체험하고, 학습할 수 있도록 도와주는 서비스입니다. 이 서비스를 통해 사용자들은 git 명령어에 대해 실습하고, 실제로 발생할 수 있는 문제 상황을 해결하는 경험을 할 수 있습니다.
+
 <br />
 
-## 기술적 도전
+## 🚀 핵심 기능
+
+### 자주 마주칠 수 있는 Git 문제를 해결해 보세요
+
+> 총 세가지 난이도로 구성되어 있습니다. 프로젝트를 진행하며 겪을 수 있는 Git 문제 상황을 실습하며 연습해보세요!
+
+- 튜토리얼 정도의 난이도 **Git start**
+- Git start보다 어려운 난이도이며 스토리 형식의 **Git advanced**
+- 원격 저장소와 관련된 문제이며 스토리 형식의 **Remote start**
+
+</aside>
+
+### 터미널 환경에서 Git을 조작할 수 있어요
 
-- 프론트엔드: 디자인 시스템 구축, Git graph 시각화
-- 백엔드: 사용자별 분산 컨테이너 관리, 부하 테스트
+> 터미널 환경에서 직접 Git 명령어를 입력하고, vi 편집기를 사용하며
+> 문제를 풀어보세요.
+
+<img alt='' src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/7e89b3f3-6987-4a1e-85d3-d6430aa3ad05" />
+
+### Git 그래프로 변화되는 Git 상황을 확인할 수 있어요
+
+> Git 명령어 동작에 따라 변화되는 Git 그래프를 보며, Git에 대한 이해를 높여보세요.
+
+<img alt='' src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/dd043d5c-347f-466a-8fe1-2660fe9f1953" />
+
+### 문제 해결이 어렵다면 도움받을 수 있어요
+
+> 문제 풀이에 필요한 핵심 명령어와 모범 답안으로 Git을 학습한 후 문제를 다시 풀어보세요.
+
+<img alt='' src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/a441aee3-f965-4dd3-aeb2-cdf17aa66194" />
+
+### 정답을 맞추면 내 답안을 공유할 수 있어요
+
+> 문제를 맞췄다면 내 풀이를 다른 사람들과 공유해 보세요.
+
+<img alt='' src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/deb17f8b-5a2d-4a9f-ade4-7b60692999ae" />
 
 <br />
 
-## 기술 스택
+## ⚙️ 기술 스택
 
 <table>
     <thead>
@@ -114,13 +173,96 @@
 
 <br />
 
-## 시스템 아키텍처
+## 🏛️ 시스템 아키텍처
+
+![시스템 아키텍처](https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/d94724b8-a7a7-48e6-bba8-891bc7bfd696)
+
+<br />
+
+## 🔎 FE 기술적 도전
 
-![시스템 아키텍쳐](https://github.com/boostcampwm2023/web01-GitChallenge/assets/79246447/38f273e5-ff11-4c7b-b4cd-be731ad7f074)
+### 디자인 시스템 구축
 
+| 컬러, 타이포그래피 시스템                                                                                                       | Semantic Token                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/38512eb4-9a99-48bf-a2df-0bf9a89bb83d" /> | <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/d61c67c7-f2b9-4109-b8a5-7fd7ab97a518" /> |
 
+- 색상과 글꼴을 디자인 토큰으로 추상화한 **컬러, 타이포그래피 시스템**으로 **디자인 일관성을 유지하고 코드베이스를 더 쉽게 관리**할 수 있었습니다.
+- 색상과 글꼴에 의미를 부여한 **Semantic Token으로 커뮤니케이션 비용을 절약**할 수 있었습니다.
+- 디자인 변경이 필요할 때 변수에 주입된 색상 코드만 수정하면 되어 **초기 개발 단계에서 디자인 변경에 대한 유연성을 확보**할 수 있었습니다.
+
+### 컴포넌트 테스트 코드
+
+- Describe-Context-It, **DCI 패턴으로 테스트 케이스를 계층화**하여 테스트 결과의 가독성을 개선했습니다.
+- 복잡한 로직을 각 구문, 함수, 분기별로 철저히 테스트하여 기능 추가 및 리팩토링 시에도 **컴포넌트의 무결성을 유지**할 수 있었습니다.
+- 테스트 케이스를 작성하며 놓친 기능 요구사항을 파악하여 **TDD로 구현**했습니다.
+
+<img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/1456a155-42fe-4f98-bbe6-4000ac72f0ff" width="80%" />
+
+### D3를 이용한 데이터 시각화
+
+- Problem
+  - D3 tree는 트리 데이터를 위한 레이아웃입니다. 하지만 **Git 로그 데이터는 트리가 아닌 네트워크 그래프 데이터**이기 때문에 D3 tree 레이아웃에 적용할 수 없는 문제가 있었습니다.
+- Solved
+  - Git 로그 데이터에서 **Multiple Parents 노드를 처리하기 위해,** 일부 간선을 분리하여 트리 데이터로 가공한 후 D3 tree 레이아웃에 적용했습니다. 이후에는 **분리한 간선을 다시 추가하여 네트워크 그래프를 시각화**했습니다.
+
+| 라이브러리 비교                                                                                                                 | 문제 해결                                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/c6c77b30-a9d1-461e-bee8-11df0a317232" /> | <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/b01a4a30-5d4b-4bf2-80c7-8a7dd0e6a3ca" /> |
+
+### UX 개선
+
+| 랜딩 페이지                                                                                                                     | Git 그래프 변화                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/aae4947d-5782-4a1e-97b5-23c445cbe573" /> | <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/1ad9a125-1137-4a8d-b5c0-140360a987c4" /> |
+
+- Intersection Observer를 사용하여 브라우저 화면에서 현재 보이는 영역을 동적으로 감지하고, 이를 기반으로 **스크롤 이벤트 애니메이션을 설계하고 구현**했습니다. 이를 통해 서비스에 처음 진입했을 때 사용자에게 적절한 맥락을 전달하고, **자연스러운 화면 전환을 제공**하기 위해 노력했습니다.
+- 사용자가 입력한 Git 명령어의 동작을 시각적으로 파악할 수 있도록 Git 그래프 변화에 애니메이션을 적용했습니다. D3의 데이터 조인을 이용해 데이터 추가, 수정, 그리고 삭제 애니메이션을 구현했습니다.
+
+<br />
+
+## 🔎 BE 기술적 도전
+
+### 도커 컨테이너
+
+<img width="50%" alt="docker container" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/c59857a3-08e5-49f0-9e8c-bab8a419be3a">
+
+- 사용자별 **격리된** git 문제 풀이 환경을 제공하면서도, git의 전역 설정들이 다른 사용자들에게 영향을 미치지 않도록 하기 위해 도커 컨테이너를 이용했습니다.
+- 컨테이너 생성 시간을 아끼고자 각 문제 별로 미리 생성된 컨테이너 환경에 사용자를 할당하고 새로운 컨테이너를 생성합니다.
+- 서버 자원을 효율적으로 사용하기 위해 오래 된(30분) 컨테이너는 자동 정리되며 사용자 재접속 시 **log 기반으로 복구**됩니다.
+- 네트워크 차단, 실행 가능 명령어 검증, 유저 권한 제한 등으로 사용자의 입력을 검증하고 제한했습니다.
+
+### HTTP로 원격 터미널 조작하기
+
+<img width="70%" alt="protocol test" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/95cdab2e-e847-45ff-8f23-5a9d8339c655">
+
+- ssh로 컨테이너에 명령을 전달하고 받아오도록 구현했으나 충분히 빠르지 않았습니다.
+- 컨테이너 관리 및 조회를 위한 작은 데이터를 단발적으로 전송할 때 효율적인 **HTTP/1.1**을 사용하는 서버를 추가 도입했습니다.
+- HTTP 서버를 추가로 개발하는 것이 쉬우면서도 빠른 방법임을 리서치했습니다.
+
+### Git editor 커스텀
+
+<img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/c0c8529d-8755-4ac9-9335-7916dcf175a0" width="50%" />
+
+- 직접 구현한 터미널과 백엔드 구조로는 vi Editor와 같은 **상호작용**이 불가능합니다.
+- 편집기의 동작을 편집할 파일을 읽는 과정, 파일을 편집하는 과정 두 단계로 **이원화**하여 Git에서 core.editor로 사용할 편집기 프로그램을 직접 작성했습니다.
+
+### 채점을 위해 Jest를 쓰지 않은 이유
+
+- Jest는 **테스팅 프레임워크**로, 단위 테스트 및 통합 테스트를 위해 널리 사용되고, 다양한 테스트 기능을 제공합니다. 사용자의 문제 환경 컨테이너가 Jest 테스트를 통과하면 정답입니다.
+- Jest를 사용하면 채점 로직에 대해 멀티프로세스를 이용해 **병렬 실행**이 가능합니다.
+- Jest 자체적으로 테스트 환경 설정과 테스트 실행 환경을 준비하는 과정이 필요했고, 이 때문에 일반 코드로 채점하는 것에 비해 **속도가 느렸기** 때문에 사용하지 않았습니다.
+
+### AI 시스템 프롬프트 설정하기
+
+- **HyperCLOVA X 엔진**은 충분히 방대한 정보를 대답할 수 있습니다.
+- Git 설치나 Git과 무관한 답변은 하지 않도록 하였습니다.
+- 교육을 위해 창의적인 해결법 보다는 학습을 위한 **전형적인 해결법**을 답하도록 하였습니다.
+- [🤖 CLOVA Studio 활용에 대해 자세한 글은 여기 있습니다.](https://bow-snail-89d.notion.site/CLOVA-Studio-c9ae177c357b4c68905fb0df83e043e4?pvs=4)
+
+<br />
 
-## 팀원 소개
+## 🧡 팀원 소개
 
 |                                     박용준                                     |                                     박정제                                      |                                    박유현                                    |                                    윤채현                                    |
 | :----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |