docs: 퇴고 및 수정

_posts/2024-07-09-edswc.md

@@ -14,15 +14,11 @@ description: 웹 컴포넌트 디자인 시스템으로 UI 개발 비용 최소
 
 EOL(End of Life)을 맞이한 **Vue2**는 7년이 넘는 시간 동안 에잇퍼센트 프론트엔드를 무사히 잘 이끌어왔습니다. 이제는 Vue2를 쉬게 하고 새로운 기술로 전환할 때입니다.
 
-에잇퍼센트 웹 프론트엔드 팀은 Vue2에서 React으로 점진적인 마이그레이션을 진행하고 있습니다. 이미 "이벤트"와 같은 일부 서비스는 Next.js 마이그레이션 되었고, 큰 개편을 앞둔 "대출" 서비스도 Next.js로 마이그레이션 진행 중입니다.
-
-**프론트엔드 프레임워크를 마이그레이션 하는 데 있어 큰 비용 중 하나는 UI 컴포넌트 개발 비용입니다**. 동일한 "버튼" 컴포넌트를 Vue.js와 React에서 따로 구현해야 할까요? 두 컴포넌트의 유지보수는 어떻게 해야 할까요? 두 컴포넌트의 UI 일관성은 보장할 수 있을까요?
-
-에잇퍼센트는 웹 컴포넌트를 도입하여 Vue2에서 React로의 점진적인 마이그레이션 과정에서 생기는 UI 개발비용을 최소화했습니다. 이 글에서는 웹 컴포넌트 도입 배경과 그 과정을 소개합니다.
+에잇퍼센트는 웹 컴포넌트를 도입하여 Vue2에서 React로의 점진적인 마이그레이션을 진행하며 생기는 UI 개발비용을 최소화했습니다. 이 글에서는 웹 컴포넌트 도입 배경과 그 과정을 소개합니다.
 
 \*\* 이 글에서는 React, Vue.js등 통상적인 뜻인 "프레임워크"로 통합하여 사용합니다.
 
-## 디자인 시스템 도입 VS 프레임워크 마이그레이션
+## 디자인 시스템 도입
 
 UI 개발의 문제점은 참여하는 인원이 늘어날수록 디자인 일관성이 깨지고, 개발 비용이 증가한다는 것입니다. 에잇퍼센트도 성장하면서 개발자와 디자이너들의 구성원이 늘어나게 되었고 아래와 같은 문제점이 생겨났습니다.
 
@@ -33,6 +29,8 @@ UI 개발의 문제점은 참여하는 인원이 늘어날수록 디자인 일
 
 불편함이 반복되고 쌓여가면서 디자인 시스템에 대한 공감대가 형성되었고 디자인 시스템 도입을 논의하기 시작했습니다.
 
+### 레거시 기술로 UI 컴포넌트 라이브러리 구현하기?
+
 하지만 웹 프론트엔드 팀에게 고민이 있었습니다.
 
 당시 주력으로 사용하던 **Vue2는 이미 지원 중단이 예고**된 상황이었기 때문에 프레임워크 마이그레이션을 고려하고 있었습니다. 여러 가지 이유로 React로의 마이그레이션을 고민하고 있었는데 디자인 시스템을 도입하게 된다면 UI 컴포넌트를 Vue2로 구현하는 것이 적절한 선택인지 고민이 되었습니다. 다음에 React로 전환할 때 UI 컴포넌트를 다시 구현해야 하고 그때마다 디자이너와 개발자 간의 커뮤니케이션 비용이 발생할 것이라는 우려가 있었습니다.
@@ -49,6 +47,8 @@ UI 개발의 문제점은 참여하는 인원이 늘어날수록 디자인 일
 
 점진적인 마이그레이션 방식은 결국 두 개의 프레임워크가 공존하게 됩니다. 만약 UI 컴포넌트를 각각의 프레임워크에서 구현한다면 두 컴포넌트를 모두 유지 보수해야 하는 상황이 발생합니다. 이는 오히려 UI 일관성을 유지하기 어렵게 만들고, 개발자와 디자이너 간의 커뮤니케이션 비용을 증가시킵니다.
 
+**프론트엔드 프레임워크를 마이그레이션 하는 데 있어 큰 비용 중 하나는 UI 컴포넌트 개발 비용입니다**. 동일한 "버튼" 컴포넌트를 Vue.js와 React에서 따로 구현해야 할까요? 두 컴포넌트의 유지보수는 어떻게 해야 할까요? 두 컴포넌트의 UI 일관성은 보장할 수 있을까요?
+
 근본적인 문제 해결 방법은 **두 프레임워크에서 동일하게 동작하는 UI 컴포넌트를 만드는 것**입니다. 표준 웹 기술인 웹 컴포넌트를 도입하면 그것이 가능할 것이라는 의견이 나왔습니다.
 
 ## 웹 컴포넌트(Web components)