안녕하세요! 조엘입니다! 😁😁
저번에 개인 프로젝트 포스팅으로 올렸던 조엘의 웹 호스팅의 최종판 Easy Deploy를 소개합니다 🎉🎉
1편. 기획에 이어, 2편에서는 개발 과정을 소개합니다.
실제 서비스, 깃헙 레포, 배포된 페이지 예시를 먼저 보고 오시면 포스팅을 읽기 더 좋아요 😁😁
🎁 서비스 URL: https://easy-deploy.kr/
🎯 GitHub: https://github.com/joelonsw/web-hosting
🙌 배포된 페이지 예시: https://easy-deploy.kr/pages/painting
자 이제 출발!! 🚗🚗
1. 어떤 기술 스택을 사용했나요?
백엔드는 Java 기반의 Spring Framework를 사용했고, 프론트엔드는 HTML, CSS, Vanilla JS로 구현했어요.
SPA 라이브러리/프레임워크를 활용해서 프론트엔드 구현을 하지 않은 이유는,,, 다룰 줄 몰라서였습니다 😅😅
놀토 프로젝트와 Easy Deploy 개발을 병행해야 했기 때문에, 새로운 기술을 배우기엔 시간이 부족하다고 생각했어요.
다행히도 HTML, CSS, JS로 간단한 프론트엔드 작업은 할 수 있었어요.
Spring 프로젝트에서는 정적 리소스 자원들을 저장한 뒤, 클라이언트의 요청에 따라 반환할 수 있는데요.
클라이언트의 요청에 따라 필요한 페이지를 서버 사이드 렌더링 하여 반환하도록 구현했어요.
(여담이지만 이때 서버 사이드 렌더링의 한계를 깨닫고 Vue.js를 배웠습니다!)
2. 어떻게 개발했나요? [BACKEND]
Easy Deploy 백엔드의 가장 핵심적인 기능인 jsoup 라이브러리 활용에 대해 공유할게요. 📜📜
[ jsoup 라이브러리 활용 ]
학부 네트워크 수업 때, 아주 간단한 웹 서버를 만드는 과제가 있었어요.
웹 서버가 HTTP 응답 바디에 HTML 파일의 내용을 담아 응답하면, 요청한 웹 브라우저에서 페이지를 볼 수 있었어요.
간단하게 HTML, CSS, JS 파일을 인터넷에서 받아볼 수 있는 방법은 여기서 착안했어요.
1. 클라이언트의 HTML, CSS, JS 파일을 내 서버에 저장해 두고,
2. 해당 페이지를 요청하는 클라이언트의 요청이 온다면,
3. 서버에 저장해 둔 해당 HTML 파일을 읽어, HTTP 응답 바디에 넣어주면 된다!
근데 HTML 파일만 응답해주면 클라이언트의 CSS, JS 파일은 받아볼 수 없잖아요?
클라이언트가 HTML 파일에 작성한 CSS, JS 링크들은 제 서버에 저장된 CSS, JS로의 요청이 아닐 텐데 말이죠. 🤔🤔
따라서 위의 방법 중 3번을 조금 바꿔야 합니다.
3. 서버에 저장해 둔 해당 HTML 파일을 읽어, 해당 HTML 파일을 꾸미는 CSS 파일들과 동적 처리를 지원하는 JS 파일들을 요청할 수 있는 태그들을 추가해준 뒤, HTTP 응답 바디에 넣어주면 된다!
이렇게 동적으로 HTML 태그를 백엔드 단에서 추가해 줄 필요가 있었어요.
그에 따라 Java로 HTML 태그를 조작할 수 있는 jsoup 라이브러리(https://jsoup.org)를 활용하게 되었어요.
런타임에 클라이언트 요청에 해당하는 HTML 파일에 CSS 요청 태그, JS 요청 태그, 구글 애널리틱스 관련 태그, Easy Deploy 워터마크 태그를 추가한 뒤 응답해줘요.
추가적으로 백엔드 구현할 때 신경 썼던 부분으로는 다음과 같아요.
- 슬랙 웹 훅을 활용해 신규 페이지 배포 및 에러가 터지면 알림 기능 구현 (참고: https://joel-dev.site/88)
- 배포 페이지 URL에 한국어를 쓸 수 있도록, UTF-8 인코딩
- JDBC로 DB에 접근했던 로직을 JPA로 이전
3. 어떻게 개발했나요? [FRONTEND]
Easy Deploy 프로젝트를 진행하면서 사실 프론트엔드를 어떻게 구현해야 할지 고민이 더 많았던 것 같아요.
쉽게 배포를 할 수 있도록 도와줘야 하는데...
대체 어떤 UI/UX가 "쉽게" 쓸 수 있는 건지 참 어렵더라고요 🤦♂️🤦♂️
제 나름대로 프로젝트를 진행하면서 이를 어떻게 발전시켜 나갔는지 공유할게요!
[ VERSION 1 ]
맨 처음 버전은 이렇게 생겼었어요. HTML 폼에 유저 ID, HTML, CSS, JS 파일을 첨부하는 형식이죠.
물론 직관적이긴 한데... 별로 쓰고 싶진 않은 UI에요. 신뢰도 안 가고 말이죠. (해킹당할 것 같아)
[ VERSION 2 ]
뭐가 문제일까 하다가,,, 너무 설명도 없이 냅다 배포 페이지를 띄워준 게 문제라고 생각했어요.
따라서 랜딩 페이지를 만들기로 했어요. 이런 식으로 말이에요.
글로벌 진출을 위해 심지어 영어로 랜딩 페이지를 작성했어요. 포부(?)가 느껴지시나요. 😂😂
내브바에 보면 GITHUB, DEPLOY, LOGIN 세 가지 메뉴가 있는데요.
GITHUB을 누르면 프로젝트 레포를 새 탭에서 볼 수 있도록,
DEPLOY을 누르면 기존의 배포 페이지를 볼 수 있도록,
LOGIN을 누르면 OAuth로 회원가입을 할 수 있도록 했어요.
Version 2를 만들면서 회원 기능을 추가했는데요. 구글/페이스북/깃헙 OAuth를 지원했어요.
회원들이 자신의 페이지를 관리할 수 있는 마이페이지가 있으면 해서 추가한 기능이에요.
하지만 Version 2는 만족하기 힘든 결과물이었어요.
페이지가 이동함에 따라 매번 서버 사이드 렌더링으로 인해 화면이 깜빡이는 게 거슬렸고,
새롭게 만든 페이지들이 배포를 해주는 서비스 같다는 느낌을 주지도 않았고,
Version 1을 기반으로 한 배포 Form UI는 여전히 신뢰감을 주지 못했어요.
완전히 새롭게 재탄생해야 한다는 생각이 들어 Version 3는 아예 새로 UI를 개편했어요.
[ VERSION 3 ]
UI를 개편하면서 "스스로 쓰고 싶은 서비스여야 한다" 생각하면서 만들었어요.
초보 개발자였던 제 모습을 생각하면서, 어떻게 해야 여기다가 배포 한 번 해볼까 생각이 들까 고민했어요.
페이지를 한국어로 바꿨어요.
페이지 사용에 있어서 장벽이 될 만한 것들을 모두 폐지하기로 했어요.
한국어로 쓰니까 얼마나 읽기 쉽습니까.
로그인 기능을 폐지하기로 했어요.
처음 보는 앱에 OAuth로 가입하는 것이 오히려 사용자에겐 장벽처럼 느껴지지 않을까 생각했어요.
그에 따라 로그인, 마이페이지 관련 기능 (백엔드 포함) 모두 폐지했어요.
페이지 하나에서 모든 과정을 처리하도록 했어요.
서버 사이드 렌더링은 생각보다 상당히 거슬렸어요.
매번 클릭할 때마다 깜빡이는 게 사용성 측면에서 좋지 않더라고요.
안타깝게도 그때의 저는 SPA 라이브러리/프레임워크를 쓸 줄 모르니,
하나의 HTML 파일을 서버 사이드 렌더링으로 받아,
해당 페이지의 DOM들을 JS로 조작해 상황에 따라 보여줄지 말지를 직접 코딩했어요.
(이게 힘들다는 것을 깨닫고서 vue.js를 배웠어요!)
Fetch API를 통해 서버와 통신하였고, 화면 깜빡임 없이 배포까지 할 수 있게 만들었어요.
진행 상황을 알려주는 프로그레스 바를 만들었어요.
배포 과정 스텝을 사용자가 인지하는 것이 웹 페이지에 대한 신뢰로 이어진다고 생각했어요.
덤으로 시각적으로도 보기 꽤 좋았고요!
드래그 앤 드롭으로 파일 첨부를 할 수 있게 했어요.
편한 사용성을 위해서는 드래그 앤 드롭으로 파일 첨부할 수 있게 하는 게 좋겠더라고요!
배포한 페이지 공유 기능을 추가했어요.
카카오톡 공유하기를 통해 바로 배포한 페이지를 공유할 수 있도록 기능을 추가했어요.
마이페이지에서 제공하던 본인의 페이지 조회하기 기능이 사라져 약간 아쉬웠는데요.
자신의 페이지를 공유할 수 있도록 하면, 본인의 페이지를 기억할 수 있지 않을까 생각했어요.
주변에 쉽게 자랑할 수 있는 효과도 물론 있고요!
프론트엔드 개발기는 어쩌다 보니 UI/UX에 대한 이야기로 더 흘러갔는데요.
아마 제가 크게 어려운 프론트엔드 기술을 쓴 게 없어서가 아닐까 생각해봅니다. 😅😅
이런 과정을 거쳐 Easy Deploy는 세상에 나오게 되었습니다! 🎺🎺🎺🎺
3편에서는 Easy Deploy를 운영하면서 느낀 점을 이야기해볼게요!
읽어주셔서 감사드리고, 궁금하거나 이야기 나누고 싶은 주제 있으시다면 댓글로 남겨주세요!
'Web > 프로젝트' 카테고리의 다른 글
| 놀토 - 1편. 도메인 설계/JPA 전략 (0) | 2021.11.22 |
|---|---|
| Easy Deploy - 3편. 운영 (2) | 2021.11.14 |
| Easy Deploy - 1편. 기획 (0) | 2021.10.23 |
| [개인 프로젝트] 조엘의 웹 호스팅 (2) | 2021.07.03 |
| [개인 프로젝트] 착시 효과 박물관 (2) | 2021.01.03 |
댓글