🤔 보이는 대로 "잘" 만드는 것이 중요!

✨ 완벽보단 완성이 더 낫다!

⛳️ 작업 순서

  1. 📐 Component Design
  2. 📦 Component Programming
  3. 📏 Responsive Design
  4. 🔗 Reactive Programming
  5. ☁ API Mocking
  6. ⛓ Data Fetching
  7. 🏷 Semantic Tagging
  8. 🚀 Documentation & Deploy
  9. 🔮 UX & Feature R&D
  10. ⚗️ Asset Management
  11. 🌏 Pre-Internationalization
  12. 🔐 Fix Vulnerability
  13. 🛠 Performance Optimizing
  14. 🪚 Reduce Size
  15. 📜 Fill Polyfill
  16. 📡 Prepare Offline
  17. 💣 Reduce Technical debt
  18. 🎬 Apply Motion Effect
  19. 💡 Web Accessibility
  20. 🌐 Auth & OAuth
  21. 💳 Payment Gateway
  22. 🚦 CI/CD
  23. 🚧 A / B Testing & Growth Hacking
  24. 🔭 Cross Platform

1. 📐 Component Design

재사용 가능한 디자인을 설계하거나, 디자인 활용 계획을 세웁니다.

2. 📦 Component Programming

재사용 가능한 디자인을 코드로 구현합니다.

3. 📏 Responsive Design

화면 크기가 서로 다른 여러 장비들도 지원 가능하도록 합니다.

4. 🔗 Reactive Programming

데이터가 변경될 때 화면 상에 항상 갱신된 데이터가 표시되도록 합니다.

5. ☁ API Mocking

이용자가 요청을 보내면 실제처럼 응답을 주는 테스트용 서버를 만듭니다.

6. ⛓ Data Fetching

이용자 요청을 서버로 보내서 응답 값을 받아온 후 이를 활용합니다.

7. 🏷 Semantic Tagging

검색엔진 최적화 및 데이터 분석에 용이하게끔 문서 내 데이터를 태깅합니다.

8. (작성 중) 🚀 Documentation & Deploy

프로젝트 개발 문서를 작성하고, 서비스를 관계자 또는 이용자들이 사용할 수 있게 배포합니다.

9. (작성 중) 🔮 UX & Feature R&D

프로젝트 내에서 개선할 수 있는 UX 요소들이나, 새롭게 사용될 기술들을 찾아서 여러가지를 비교한다음 적용하거나 개발합니다.

10.(작성 중) ⚗️ Asset Management

프로젝트 내에서 사용하는 이미지, 파일들을 괸리합니다.

11. (작성 중) 🌏 Pre-Internationalization

프로젝트가 다국어를 지원할 수 있도록 텍스트들을 미리 번역가능한 요소로 분리합니다.

[콘티]
다국어화는 꼭 번역 텍스트를 미리 구성하는 것이 아님, 미리 번역가능한 요소로 빼놓는 것

12. (작성 중) 🔐 Fix Vulnerability

서비스 및 프로젝트의 오남용을 방지하고, 상시적으로 취약점을 찾아서 고칩니다.

13. (작성 중) 🛠 Performance Optimizing

브라우저 상에서 작동하는 성능을 개선하고, 프로그램을 더 빠르게작동하도록 합니다.

[콘티]
이런 것들을 다 하고 나면 이제 크롬 Lighthouse 로 성능 체크를 하고
렌더링 스피드, 메모리 사용량 체크, 벤치마크 등을 돌린 후,
서비스워커로 콘텐츠를 자체 캐싱하고, brotli 나 gzip 이 잘 동작하는지도 보고,
이제 웹팩 설정을 잔뜩 바꾸기 시작해야합니다.

14. (작성 중) 🪚 Reduce Size

브라우저와 서버 사이 오고가는 데이터의 용량을 최소화합니다.

[콘티]
웹팩번들 용량 관리는 젠가 같아서 잘 빼면 문제가 없지만
잘못 빼는 순간 조용히 어느 순간 눈치못챈 기능이 마비됩니다.
따라서 유닛테스트와 E2E 테스트용 코드를 각각 Jest 와 QAWolf 같은거로
구성함과 동시에 불필요해보이는 모듈들을 하나씩 제거합니다.

15. (작성 중) 📜 Fill Polyfill

프로젝트가 구형 브라우저에서 동작할 수 있도록, 구형 브라우저에 없지만 프로젝트에서 사용 중인 브라우저 기능들을 프로젝트에 내장합니다.

[콘티]
웹페이지를 보는 이용자들의 환경은 매우 다양해서 매우 구형 버전의 경우
요즘 디자인이나 기술들이 동작을 안하고 멈춥니다.

따라서 구형 브라우저에 알맞는 패치를
[<http://polyfill.io>](<http://polyfill.io/>) 
에서 적절히 뽑아와야합니다. 이과정에서 MDN 스펙과
[<http://caniuse.com>](<http://caniuse.com/>) 을 수시로 들어가야합니다.

- babel
- autoprefix

16. (작성 중) 📡 Prepare Offline

프로젝트가 오프라인 상태가 되었을때에 동작이 가능하게 하거나, 예외처리를 구성하여놓습니다.

[콘티]
요즘은 4G 인터넷 환경이 속도가 느린경우도 있고
아예 중간에 오프라인이 되는 경우도 있어서,

속도가 느린 환경에서 이용자가 버튼을 여러번 누르거나해서
요청이 반복적으로 날아가지 못하도록 bounce debounce 처리

검증 코드를 빡세게 곳곳마다 적용해야합니다.
요청당 예외처리도 필수
오프라인 예외처리도 중요

17. (작성 중) 💣 Reduce Technical debt

주기적으로 신기술 추세를 파악한 후 현재 프로젝트의 사용 기술과 비교하여 시장과의 기술격차를 줄여서 기술부채량을 줄입니다.

[콘티]op
기술은 1년마다 기술 판세가 확확 바뀌어서 
state of js
state of css
best of js 
등의 사이트 들을 매년 체크해가며 정치판 분석처럼 흐름 분석후,
어느 기술이 뜰지 예측해서 배워놓고 써봐야합니다.
하루하루 레거시와 기술부채가 쌓입니다.
(빚이라고 다 부정적 빛은 아님을 명시)
리서치
리팩토링)

18. (작성 중) 🎬 Apply Motion Effect

화면 자체 및 화면 내 요소에 움직이는 효과를 더합니다.

[콘티]
기획자나 디자이너분들이 완성된 디자인을 본 후
"개발자님!! 애플에서 이거 움직이고
저거 움직이고 요거 날아다니는데 저희도..!!"
와 같이 반응형으로 움직이는 특수효과들 만들어달라는 걸,
lottie, framer motion, remotion 등으로 영상처리.
(웹에서 만드는데 개발자도 에프터 이팩트를 켜야한다는 점 명시)

19. (작성 중) 💡 Web Accessibility

시각 / 이동성 / 청각 / 인지적 능력과 상관없이 사람들이 모두 동등하게 정보에 접근하고 이용할 수 있게 보장합니다.

[콘티]
이 모든 상황을 넘겼다해도 아직 웹페이지를 지원해줘야하는
대상은 많습니다. 우리한텐 당연한 것들 예를 들면 화면을
보지 못하시는 분, 버튼조작이 힘든 분, 장문 타이핑이
힘든 분들을 위해서 react-aria, react-spectrum
등으로 웹 접근성 작업도 틈틈히 해줘야합니다.
(이런건 눈에 보이지 않는 작업들입니다.)

20. (작성 중) 🌐 Auth & OAuth

자체 로그인 시스템 및 소셜 로그인 등을 적용합니다.

[콘티]
이렇게 한다음 소셜로그인 (애플, 구글, 페이스북,
인스타그램, 네이버, 카카오) 를 지원해서 서비스
사용자가 늘어나게해서 MAU DAU 를 확보
- OAuth, JWT, Token

21. (작성 중) 💳 Payment Gateway

프로젝트에 이용자가 사용하기 편한 국내결제 / 해외결제 모듈을 적용합니다.

[콘티]
비즈니스 모델이 생기면 국내 PG결제(토스 페이먼츠,
PAYCO, 아임포트) 해외 PG결제(Spreedly,
Stripe, Paypal), 본인인증(나이스) 도 달아줘야합니다

22. (작성 중) 🚦 CI/CD

애플리케이션 개발 단계를 자동화해서 애플리케이션을 보다 짧은 주기로 이용자들에게 제공할 수 있도록 합니다.