React from Scratch 서비스 기획

디자인의 혁신을 모토로 삼고 있는 기업인 만큼 웹사이트 디자인이 유려하고, 반응형 UI도 본받을만합니다. width기준으로 브레이크포인트가 3개인 반응형 디자인이 적용이 되어 있습니다. 이렇게 반응형 단계를 쪼개면 유지보수가 어렵지 않을까 생각이 드는데, 어떻게 컴포넌트를 만들었는지 정말 궁금합니다.

메인 컬러는 그린입니다.

흰 바탕으로도 이렇게 세련된 페이지 디자인을 뽑아낼 수 있음에 감탄하면서 서비스 페이지를 구경했네요. 무슨 패션잡지같아요.

서비스 내부로 들어가면 Nested Route가 적용된 레이아웃이 보입니다. SaaS 플랫폼들은 로그인 전과 후가 이렇게 다른 경우가 많은 것 같아요. 메인페이지는 서비스에 대한 소개를 통해 사용자를 유입시키고, 로그인 이후에는 서비스의 핵심 기능들을 사용해야하기 때문이겠죠?

토스
디자인 하면 토스를 빼놓을 수 없죠. 브레이크포인트가 2개인 반응형디자인이 적용되어있고, 스크롤 애니메이션을 활용하여 자칫 밋밋해보일 수 있는 메인 페이지를 더욱 풍부하게 만들어주고, 사용자가 서비스 소개에 집중하도록 만들고 있습니다.

https://toss.im/

Dribble

https://dribbble.com/following

Dribble 자체도 훌륭한 UI 레퍼런스 사이트가 될 수 있다는 생각이 들었습니다. 카드 디자인이 인상적이었어요.

폰트

저는 미리캔버스에서 주 폰트로 사용한 FigTree 구글 폰트 가 마음에 들어 이 폰트를 메인 폰트로 삼도록 하겠습니다.

Figma

작업중인 피그마 링크

기술스택

기존에 설정해놓은 React기반으로 진행을 할 예정입니다.
서비스도 서비스지만, 리액트에 대한 이해도를 높이기 위해 프레임워크를 사용하지 않고 순수 리액트로 구현해보려 합니다.

이후에 점진적으로 프레임워크를 적용하여 리팩토링을할 예정입니다.

React
Axios
컴포넌트 스타일링: @emotion/styled 또는 styled-components => 추후 tailwindcss
상태관리 라이브러리: Redux-toolkit => 추후 Recoil로 리팩토링
Three.js 부분도입

Git 전략

Git-flow main-dev-feature

배포전략

배포플랫폼

후보는 크게 두 가지
1. Netlify : Vanilla JS 프로젝트를 진행하면서 Netlify 사용법에 익숙해서 금방 배포할 수 있다.
2. AWS S3 : 사용해본 적이 없지만, 클라우드 환경에서의 배포는 경험해보면 정말 좋기에 욕심이 난다.

CI/CD

Netlify를 사용해 배포하면 알아서 CI/CD까지 해준다.
AWS를 이용하면 따로 설정을 해야하나...? 조사해봐야곘다.

기능요구사항

인증

회원가입
회원탈퇴
비밀번호찾기
비밀번호 변경
프로필 정보 변경

Grid와 Flex를 이용한 카드 레이아웃

404 페이지

페이지네이션

query string을 이용한 방법
API를 활용한 방법

UI - 테이블 컴포넌트

컬럼 정렬기능
row데이터 검색기능

UI - 리스트 컴포넌트

Seungrok Yoon (Lethe)

안녕하세요 개발자 윤승록입니다. 내 성장을 가시적으로 기록하기 위해 블로그를 운영중입니다.

다음 포스트

React from Scratch 서비스 기획

[프로젝트] React-from-Scratch

이전 글 목록

목적

주제 - 무료 오픈 API 활용

주식

부동산

서비스가 전달하고자 하는 가치

UI

디자인 벤치마킹 레퍼런스 사이트

폰트