catsridingCATSRIDING|OCEANWAVES
Announcement

All-New Design

jynn@catsriding.com
Oct 16, 2023
Published byJynn
999
All-New Design

All-New Design

μ•ˆλ…•ν•˜μ„Έμš”, λ°±μ—”λ“œ 개발자 μ§„μž…λ‹ˆλ‹€. μ§€κΈˆκΉŒμ§€ 총 λ„€ 번의 λΈ”λ‘œκ·Έ κ°œνŽΈμ„ 거쳐 λ§ˆμΉ¨λ‚΄ 썩 λ§ˆμŒμ— λ“œλŠ” λΈ”λ‘œκ·Έλ₯Ό κ΅¬ν˜„ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. πŸ₯³ πŸŽ‰

Prelude

2020λ…„ 11μ›” 11일, λ§Žμ€ 것을 내렀놓고 λ°±μ—”λ“œ 개발자 λ‘œλ“œλ§΅μ— 였λ₯Έ μ €μ—κ²Œ λΈ”λ‘œκ·ΈλŠ” λΆˆμ•ˆν•¨μ„ ν•΄μ†Œν•΄ μ£Όμ—ˆκ³  μ‚¬μ†Œν•œ 즐거움과 성취감을 μ•ˆκ²¨μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

글을 μ“°κ³  μ •λ¦¬ν•˜λŠ” 것은 ν•™μŠ΅ν•˜λŠ” κ³Όμ •μ—μ„œ 생각을 정리해주고 μ΄ν•΄λ˜μ§€ μ•Šμ€ λΆ€λΆ„κ³Ό λΆ€μ‘±ν•œ λΆ€λΆ„λ₯Ό λͺ…ν™•νžˆ κ΅¬λΆ„ν•΄μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

그리고 μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³  ν˜‘μ—…ν•˜λŠ” κ³Όμ •μ—μ„œλ„ λ§Žμ€ 도움이 되고 μžˆμŠ΅λ‹ˆλ‹€. ν”„λ‘œκ·Έλž˜λ°μ΄λž€ 것도 κ²°κ΅­ 머릿속에 λ– μ˜€λ₯Έ μ•Œκ³ λ¦¬μ¦˜μ„ κΈ€λ‘œμ¨ ν‘œν˜„ν•˜λŠ” 일련의 과정이고, μš°λ¦¬λŠ” 또 λ§Žμ€ λ¬Έμ„œν™” μž‘μ—…μ„ 톡해 자료λ₯Ό κ³΅μœ ν•˜κ³  μ˜μ‚¬μ†Œν†΅μ„ ν•©λ‹ˆλ‹€.

Reminiscence

ν‹°μŠ€ν† λ¦¬ κΈ°λ³Έ ν…Œλ§ˆμ˜ HTML & CSSλ₯Ό μˆ˜μ •ν•˜λŠ” κ²ƒμœΌλ‘œ μ‹œμž‘ν•˜μ—¬, GitHub에 곡개된 JeyKyll ν…Œλ§ˆλ₯Ό μ μš©ν•œ 정적 μ‚¬μ΄νŠΈ, 그리고 처음으둜 λ°‘λ°”λ‹₯λΆ€ν„° ν•˜λ‚˜ν•˜λ‚˜ κ΅¬ν˜„ν•΄ λ³Έ Vue.js ν”„λ‘œμ νŠΈκΉŒμ§€... λ‚˜λ§Œμ˜ λΈ”λ‘œκ·Έλ₯Ό λ§Œλ“€κΈ° μœ„ν•΄μ„œ μ§€κΈˆκΉŒμ§€ λ§Žμ€ 여정을 거쳐왔고 λ“œλ””μ–΄ κ·Έ λͺ©μ μ§€μ— λ‹€λ‹€λ₯΄κ²Œ 된 것 κ°™μŠ΅λ‹ˆλ‹€.

Take a Leap

이번 κ°œνŽΈμ—μ„œ κ°€μž₯ 큰 λ³€ν™”λŠ” μ•„λ¬΄λž˜λ„ 정적 μ›Ήμ—μ„œ λ²—μ–΄λ‚˜ λ°±μ—”λ“œ μ„œλ²„λ₯Ό κ΅¬μΆ•ν•œ κ²ƒμž…λ‹ˆλ‹€.

정적 웹은 κ΅¬μΆ•ν•œ 이후뢀터 λ”°λ‘œ 관리할 것이 μ—†κ³  λ§ˆν¬λ‹€μš΄ νŒŒμΌμ— κΈ€λ§Œ μž‘μ„±ν•˜λ©΄ λ˜μ–΄μ„œ μœ μ§€ 보수λ₯Ό μ‹ κ²½ 쓰지 μ•Šμ•„λ„ λ©λ‹ˆλ‹€. 그리고 λΉ„μš©λ„ λ”°λ‘œ λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” 큰 μž₯점이 μžˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ κ·Έλ™μ•ˆ μ„œλ²„λ₯Ό λ”°λ‘œ κ΅¬μΆ•ν•΄μ•Όκ² λ‹€λŠ” 생각이 듀지 μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

ν•˜μ§€λ§Œ μ΄λ²ˆμ—λŠ” 배운 것을 κΈ€λ‘œ μ •λ¦¬ν•˜λŠ” κ²ƒλΏλ§Œ μ•„λ‹ˆλΌ λΈ”λ‘œκ·Έλ₯Ό 톡해 μ„œλ²„μ™€ 인프라적인 μ˜μ—­μ—μ„œ λ‹€μ–‘ν•œ ν•™μŠ΅κ³Ό μ‹€ν—˜μ„ ν•˜κΈ° μœ„ν•΄ λ°μ΄ν„°λ² μ΄μŠ€λ₯Ό μ„€κ³„ν•˜κ³  λ°±μ—”λ“œ μ„œλ²„λ„ κ΅¬μΆ•ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

Prototyping

아름닀움은 λ””μžμ΄λ„ˆμ˜ νƒ€κ³ λ‚œ 재λŠ₯, μ—„κ²©ν•œ ν›ˆλ ¨, 그리고 λ‹€μ–‘ν•œ μ‚¬μš©μž κ²½ν—˜λ“€μ΄ κ²°ν•©λœ 과학적 근거둜 νƒ„μƒν•©λ‹ˆλ‹€. νƒ€κ³ λ‚œ 재λŠ₯을 λ‹¨λ ¨ν•˜κ±°λ‚˜ 전문적인 κΈ°μˆ μ„ μŠ΅λ“ν•˜λŠ” 것은 μ–΄λ €μšΈ 수 μžˆμ§€λ§Œ, 잘 λ””μžμΈλœ μ‹œμŠ€ν…œμ„ λ”°λ₯Έλ‹€λ©΄ λˆ„κ΅¬λ“ μ§€ ν›Œλ₯­ν•œ μ œν’ˆμ„ λ§Œλ“€μ–΄λ‚Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

λ””μžμ΄λ„ˆλ“€μ΄ κ³΅μœ ν•œ κ²½ν—˜μ„ λ°”νƒ•μœΌλ‘œ ν”„λ‘œν† νƒ€μ΄ν•‘ μž‘μ—…μ„ μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€. πŸ’Ž Sketchλ₯Ό ν™œμš©ν•˜λ©΄μ„œ 생각이 차곑차곑 μ •λ¦¬λ˜μ—ˆκ³ , 머릿속에 κ·Έλ €μ Έ 있던 이미지가 점점 보닀 ꡬ체적으둜 ν‘œν˜„λ˜κΈ° μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€. λΈ”λ‘œκ·Έμ˜ μ „λ°˜μ μΈ κ΅¬μ‘°λŠ” λˆˆμ—¬κ²¨ 두고 있던 Spotify Engineering 기술 λΈ”λ‘œκ·Έλ₯Ό λͺ¨λΈλ‘œ μ‚Όμ•˜κ³ , ν…Œλ§ˆλŠ” λΈ”λ‘œκ·Έ ν™”λ©΄ κ΅¬ν˜„ κ³Όμ • 쀑에 λͺ¨λ‹ˆν„° ν•˜λ‚˜λ₯Ό 독차지 ν•˜κ³  있던 Tailwind CSS μ›Ήμ‚¬μ΄νŠΈλ₯Ό μ°Έκ³ ν•΄ κ΅¬μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

all-new-design-1.png

이 과정을 톡해 보닀 완성도 높은 λΈ”λ‘œκ·Έλ₯Ό κ΅¬ν˜„ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ¬Όλ‘ , μ—¬κΈ°μ„œ μ™„μ„±λ„λŠ” 개인적인 κ²¬ν•΄μž…λ‹ˆλ‹€. πŸ˜…

Hello, React!

"Do not try to do everything. Do one thing well."

μ–΄λ €μ„œλΆ€ν„° ν•œμ •μ μΈ μ‹œκ°„μ„ μͺΌκ°œ μ—¬λŸ¬ 가지 κ²½ν—˜μ„ ν•˜λŠ” 것보닀 λ§ˆμŒμ— λ“œλŠ” 것 ν•˜λ‚˜λ₯Ό λŠμž„μ—†μ΄ νŒŒκ³ λ“œλŠ” 것을 μ’‹μ•„ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λ°±μ—”λ“œμ˜ 바닀에 λ›°μ–΄λ“  μ΄ν›„λ‘œ κ³„μ†ν•΄μ„œ 더 깊게 λΉ μ Έλ“€κ³  μžˆμŠ΅λ‹ˆλ‹€.

ν•˜μ§€λ§Œ, ν”„λ‘ νŠΈμ—”λ“œμ˜ 기술λ ₯ μ—†μ΄λŠ” κ°„λ‹¨ν•œ μ›Ήμ‚¬μ΄νŠΈ ν•˜λ‚˜ λ§Œλ“€κΈ°κ°€ λ²„κ±°μš΄ 것이 μ‚¬μ‹€μž…λ‹ˆλ‹€. κ·Έλž˜μ„œ 쑰금 μ—¬μœ κ°€ 생겼을 λ•Œ κ·Έλ‚˜λ§ˆ κ°€μž₯ 접근성이 μš©μ΄ν–ˆλ˜ Vue.jsλ₯Ό ν•™μŠ΅ν•˜μ˜€κ³  κ°„λ‹¨ν•œ μ–΄λ“œλ―Ό μ›Ήμ‚¬μ΄νŠΈλ‚˜ λΈ”λ‘œκ·Έλ₯Ό λ§Œλ“€ 수 있게 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

그런데 Vue.jsλŠ” μ„Έκ³„μ μœΌλ‘œ React 만큼 ν™œμ„±ν™”λ˜μ§€ λͺ»ν–ˆκ³ , ReactλŠ” ν˜„μž¬ 사싀상 κ΅­λ‚΄ ν‘œμ€€ κΈ°μˆ μ΄λ‚˜ λ‹€λ¦„μ—†μŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ μƒˆλ‘œ κ°œνŽΈν•˜λŠ” λΈ”λ‘œκ·Έμ˜ μ½”μ–΄ ν”„λ ˆμž„μ›Œν¬λ₯Ό 선택함에 μžˆμ–΄ 이 λ‘˜ μ‚¬μ΄μ—μ„œ 정말 λ§Žμ€ 고민을 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

ν•™μŠ΅ν•΄μ•Ό ν•  λ°±μ—”λ“œ κΈ°μˆ λ„ κ³„μ†ν•΄μ„œ λŠ˜μ–΄λ§Œ κ°€λŠ” μƒν™©μ—μ„œ 또 λ‹€λ₯Έ ν”„λ‘ νŠΈμ—”λ“œ 라이브러리λ₯Ό ν•™μŠ΅ν•œλ‹€λŠ” 것은 정말 큰 λΆ€λ‹΄μ΄μ—ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸΌμ—λ„ κ³ λ―Ό 끝에 업계 ν‘œμ€€ κΈ°μˆ μ„ κ²½ν—˜ν•΄ λ³΄λŠ” 것이 쒋을 것 κ°™λ‹€λŠ” 결둠에 이λ₯΄λŸ¬ 이번 λΈ”λ‘œκ·Έ ν”„λ‘œμ νŠΈμ˜ μ½”μ–΄ λΌμ΄λΈŒλŸ¬λ¦¬λŠ” React둜 μ„ νƒν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

Last But Not Least

λΈ”λ‘œκ·Έλ₯Ό κ΅¬ν˜„ν•˜λ©΄μ„œ μ‚¬μš©ν•œ μ£Όμš” 기술과 νˆ΄μž…λ‹ˆλ‹€.

  • Backend πŸ’ 
    • Java 17
    • Spring Boot 3.1.4
    • JPA
    • Querydsl
    • MySQL 8
    • Redis
    • Amazon Web Services
    • Docker
    • Jenkins
  • Frontend πŸ’„
    • TypeScript
    • React
    • Next.js 14
    • Tailwind CSS
    • Vercel
  • Tools 🧰
    • Macbook Pro
    • IntelliJ IDEA
    • WebStorm
    • DataGrip
    • Warp
    • Sketch

Outro

아직 κ΅¬ν˜„ν•΄μ•Ό ν•˜λŠ” κΈ°λŠ₯이 많이 λ‚¨μ•˜μ§€λ§Œ πŸ”– Version 1.0.0을 μ„±κ³΅μ μœΌλ‘œ 릴리즈 ν•  수 μžˆμ–΄μ„œ λΏŒλ“―ν•©λ‹ˆλ‹€. TypeScript와 Reactμ—μ„œ 헀맀고 μžˆμ„ λ•Œ 심적 μ•ˆμ •μ„ μ°Ύμ•„μ€€ μ˜Ήμ΄μ™€ λͺ½μ΄λ„ 고생이 λ§Žμ•˜μŠ΅λ‹ˆλ‹€. πŸ’–

all-new-design_00.jpeg

all-new-design_02.jpeg

all-new-design_00.jpeg

이제 μ—΄μ‹¬νžˆ ν¬μŠ€νŒ…λ§Œ ν•˜λ©΄ λ˜κ² λ„€μš”...πŸ˜³πŸ’¦

  • Ongs
  • Mongs