첫 블로그 만들기 #1 개요, 피그마(UI) 설계, 아키텍처 설계
0. 개요
최근에 html, javascript, css를 이용해 간단한 페이지를 만드는 유튜브 영상을 따라서 실습을 한 적이 있다.
아직 잘 아는 건 아니지만, 내가 만들고 싶은 것을 만들고 싶어 시작하게 되었다.
목적
- 나를 소개하는 블로그 만들기
(자기 PR 블로그)
- 웹사이트를 한 번 만들어 보면서 웹 동작 방식 이해
요구사항
- 기술 스택을 로고 이미지로 나타낼 것
- welcome 문구를 타이핑하는 듯한 효과를 줄 것
- 블로그, 깃허브 링크를 넣을 것
- 스크롤 내리면 바탕화면 색 변할 것
- 한 화면에 글이 몰려있지 않고, 심플하면서도 가독성 있을 것
1. 피그마로 UI 짜기
타이핑하는 효과
사실 welcome 문구를 타이핑하는 듯한 효과는 따라서 실습한 유튜브 영상에 나온다
(사실 해당 영상을 보고, 블로그를 만들면 딱이겠다 생각하기도 했다)
이 사이트 UI를 기본으로 시작해, figma를 작성했다.
기술 스택을 로고 이미지로 나타낼 것
이건 바로 아이디어가 떠올랐다.
레일 위에 로고가 흘러가는 듯한 모습을 떠올렸다.
왼쪽으로 무한히 이동하고, 화면 끝에 도달하면 오른쪽에서 다시 등장하도록 할 것이다 !
블로그, 깃허브 링크를 넣을 것
의외로 이곳에서 많은 시간이 걸렸다.
그 이유는 이미 welcome~ 문구 바로 아래 노란 글씨로 github 계정명을 명시했기 때문이다.
블로그, 깃허브 링크 2개만 넣는다면 따로 메뉴/버튼을 이용해 링크를 확인하도록 하는 게 의미가 있을까?
그래서 처음에는 블로그 바로가기같은 버튼을 생각했다.
아 그런데 깔끔하지 않고 예쁘지 않다.
그리고 나중에 email계정이나 다른 계정도 추가할 수도 있을 것 같아서,
최종적으로는 link를 위한 메뉴를 추가하기로 했다.
디자인은 영화의 엔딩 크래딧 느낌이 나도록 만들어봤다 !
(근데 내용이 눈에 잘 안들어와서 고민중이다 ..)
이를 기반으로, 나머지 화면도 figma로 전부 작성했다 !
(참고로 애니메이션은 유료 계정에서 된다길래, loti plugin을 이용해 gif를 생성해서 넣어봤다.)
2. 아키텍쳐 설계
UI가 정해졌으니 이제
아키텍쳐 설계를 진행하고, 언어/프레임워크를 정해보자!
아키텍처
사용자의 입력 텍스트가 A라면, 이 웹페이지에 A 문자열을 포함한 위치로 이동 (스크롤)진행된다.
이 기능을 제외하고서는, 단순히 component를 보여주기만 한다.
(사실 이 아키텍처가 적절한지 모르겠다.
이유는 웹사이트가 정확하게 어떻게 돌아가는지 모르기 때문에 검색처리를 따로 뺐다.)
그렇다면, 모호한 부분을 해결해보자.
검색처리, 어떻게 구현될까?
나의 경우에는,
- 단일 웹페이지이다 (검색 범위가 메인 페이지 하나에 국한된다)
- 단순히 문자열이 존재하는지 보는 것이다 (ctrl + f로 검색하는 것과 동일)
이기 때문에 굳이 서버에게 '검색 결과 뭐니?' 하고 물어볼 필요가 없다고 생각했다.
클라이언트에서 처리로 선택
데스크탑/모바일을 대상으로 하는 웹사이트인가?
그렇다. 나는 데스크탑은 물론, 모바일 기기에서도 확인이 가능했으면 좋겠다.
SPA (Single Page Application) VS MPA (Multiple Page Application)
나의 경우에는,
- 단일 웹페이지이다
- 스크롤이 이루어질 때마 즉각적으로 로딩이 이루어져, 부드러운 움직임을 주고 싶다
이러한 이유로 SPA (Single Page Application)를 택했다.
(나중에 정리할 것이지만, SPA는 단순히 한 페이지로 구성되어있는 것 말고도,
다수의 페이지를 하나인 것처럼 페이지 전환없이 구현한 것을 말한다고 한다.
추가 정보는 많은 도움을 준 이 블로그를 참고하자.
서버 사이드 렌더링 VS 클라이언트 사이드 렌더링
| 서버 사이드 렌더링 | 클라이언트 사이드 렌더링 |
| 서버에서 렌더링 후 결과 (HTML코드)와 javascript코드를 클라이언트에 전달 |
서버에서( 거의 비어있고 javascript링크가 있는) HTML 코드 전달, 클라이언트에서 렌더링 |
| 클라이언트에서 javascript로 HTML 제어 | 클라이언트에서 javascript로 HTML 제어 |
| 새 페이지 이동 시 클라이언트 새로고침 발생 (서버에서 렌더링 후 클라이언트에 전달) |
새 페이지 이동해도 새로고침 발생 x (최초에 모든 페이지를 로딩했으므로) |
| 초기 로딩 속도 빠름 | 초기 로딩 속도 느림 (첫 요청 시 모든 페이지에 대해 데이터 저장 후 렌더링 마침) |
| SEO 검색엔진 최적화 기능 (서버 -> HTML 코드 -> 클라이언트) |
좋지 않은 SEO 검색엔진 최적화 |
검색하니, 클라이언트 사이드 렌러딩은 SPA에 적합하다고 한다.
즉, 한 페이지에 모든 내용이 몰려 있으므로
클라이언트 사이드 렌더링 으로 결정 !
어떤 서버가 필요한가?
백엔드 서버는 필요하지 않다. API 콜을 부를 이유가 없으니 말이다.
하지만 정적 파일 (HTML, CSS, Javascript)를 제공해줄 웹 프론트엔드 서버는 필요하다.
- 웹 브라우저에서 최초 렌더링 시 HTML, CSS, .. 같은 data를 어디에선가 (서버) 에서 최소 1번 이상 가져와야 한다.
- 나의 경우에는 검색 필터링 기능 또한 클라이언트에서 수행하므로 최초 1번만 해당할 것이다 (라고 예측)
DB/쿠키가 필요한가?
DB/쿠키를 두지 않는다.
사실 기술 스택 상세설명 에 DB를 둘까도 고려해봤다.
하지만
1. 데이터 수가 적다 (현재 3개, 확장성을 고려해도 겨우 10개남짓 -> 그보다 많아진다면 추후 논의예정)
2. CSR에 초기 속도가 느리다는 문제가 있는데, DB를 추가해 총 로딩 시간을 늘리고 싶지 않다
해당 이유로 인해 DB는 두지 않는다.
쿠키를 두지 않는 이유는
사용자를 딱히 구분할 이유도 없고, 로그인 기능도 없기 때문이다.
HTTPS VS HTTP
HTTPS
- 서버에서 보내는 데이터 암호화 (SSL)
- SEO에 혜택 (검색엔진 최적화)
- 가속화된 모바일 페이지 (AMP) 생성 시 HTTPS 필수
라고 한다.
하지만 나의 경우에는 단순 정보를 보여주기 때문에
굳이 데이터를 암호화할 필요가 있을까? 싶다.
HTTP로 페이지 생성 (추후고려)
언어/프레임워크 결정
프론트엔드: SPA 도입에 따라 React, Vue.js, Angular, Ember, ... 등 Javascript Framework 중 택 1
- 개발 기간이 짧은 만큼 (1~2일) 쉬웠으면 좋겠음
- 전 프로젝트에서 React 코드를 실행시키고, 수정한 경험이 있음
하지만 아주 간단한 단일 웹페이지를 만드는데, 굳이 프레임워크를 사용할 필요가 있을까?
그래서, 순수 javascript로 짜기로 한다 !
(vanila javascript)
배포계획
- 사용자: 한 달에 1명 ..? 꼴로 접속할 것 같다.
(트래픽을 고려해 LB를 두지 않아도 될 것 같다)
- 웹 프론트 서버 호스팅: 무료를 원한다. 마침 도메인도 있겠다, 닷홈 호스팅 서비스를 이용해보겠다 !
- 닷홈: 3개월 무료 호스팅 지원, ftp 접근
- 관련 사이트 참고
- 도메인: 포크번에서 전에 구입했던 도메인을 사용한다
아키텍처 최종
예상되는 문제
- SEO 어려움 (하지만 나에게는 중요한 이슈가 아닐 것 같다)
- 초기 로딩 속도의 느림
일단 아키텍처도 나왔으니, 본격적으로 개발을 시작하기 전에
일정을 세우고, 프로젝트 깃허브 레포를 만들어야겠다~!
부지런히 달리자 !