클라우드 스튜디오(Cloud Studio)
IaC(Infra as a Code)를 활용한 웹 기반의 클라우드 인프라 협업 시스템
| 개발 언어 | 프레임워크 | 플랫폼 | 개발 기한 |
|---|---|---|---|
| TypeScript | NextJS(v12) | web | 2021.09 - 2022.12(참여일 기준) |
프로젝트 개요
웹 기반의 클라우드 인프라 협업 도구로 IaC(Infra as a Code)를 활용해 클라우드 인프라를 시각화하고, 배포 및 버전 관리를 통해 효율적으로 인프라를 관리할 수 있는 SaaS 서비스
주요 역할
React + SCSS 기반 컴포넌트를 활용한 UI 개발
React와 SCSS(CSS Module)을 활용한 재사용성이 높은 컴포넌트 개발.
- 디자인 시스템과 연계한 재사용성을 높인 공통 컴포넌트 개발
- 컴포넌트를 활용한 주요 페이지 마크업 - 인프라 캔버스, 대시보드 등
- Recoil을 활용한 글로벌 상태에 영향을 주는 UI 처리
- 웹 모바일 간 반응형 UI 제작
React + Figma를 활용한 서비스 개발을 위한 디자인 시스템 개발
다양한 도구를 활용해 프론트엔드와 디자인 팀 간 협업할 수 있는 환경 개발 주도
- Figma를 활용한 아토믹 디자인 기반의 디자인 시스템 개발 및 적용
- gitlab, npm, rollup을 활용한 리액트 기반의 디자인 시스템 패키지 번들링
- storybook을 활용한 UI 테스트 및 공유 환경 개발
- TSDoc 기반의 주석 작성을 통한 코드 내 가이드 작성
- Docusaurus 기반의 개발 및 서비스 가이드 작성
피그마를 활용한 서비스 Hi-Fi 프로토타입 제작
제품 개발을 위한 프로토타이핑 설계 및 디자인
- 메인 플로우를 중심으로 한 프로토타입 제작
- 디자인시스템 적용한 효율적인 디자인 환경 구축
서비스 MVP 디자인 및 개발
제품 개발을 위해 사용자 인터뷰 및 디자인 산출물 작성
- 클라우드 컨설팅 및 MSP 인력을 대상으로 한 인터뷰 등 자료 수집
- 인터뷰를 바탕으로 한 디자인 산출물 작성
- 퍼소나, 유저저니맵 등
- CI 개발 (Cloud Studio)
- 자회사 CI 개발 (Cloudraw)
- 사업화를 위한 산출물 작성 (디딤돌 사업 선정)
기술스택
- NextJS(v12)
- React(v18)
- Recoil(v0.6)
- Storybook(v6)
- Docusaurus(v2)
- TypeScript(v4.9)
- CSS Module
링크
*서비스 이용은 회원가입 및 로그인이 필요하며, 요청 시 테스트 계정 제공하겠습니다.