Web Front-end 갱신 프로젝트

20여년 전에 겨우 인터넷이 태동하던 시절에 Web Server HOWTO라는 홈페이지를 만들어 운영했었다.

2000년 들어 홈페이지를 운영할 상황이 안 되어 사이트가 없어졌었고,

2018년에 갑자기 이걸 되살리고 싶어져 그 당시 받아 두었던 백업본을 찾아 되살려냈다.

 

PC에 Apache Server, MariaDB, GCC 등을 설치해 기존 소스 그대로 사이트를 살려내는데 

Web 표준이 많이 바뀌어 HTML 1.0 시절의 소스가 그대로 동작하지 않아 

상당히 많은 수고를 하면서 기존 모습 그대로의 홈페이지를 되살려낼 수 있었다.

블로그 어디쯤의 글에 되살려낸 페이지의 스크린 샷이 있을텐데...

 

20년 전 홈페이지 재생

 

여기 있구만.

헤더를 제외한 부분은 옛날 것 그대로다.

 

이걸 현행 기술로 재생하는 프로젝트를 거의 1년 동안 진행했고

NUXT.js, VUE.js, MongoDB 등의 프레임워크에 Material Design이라는 최신 추세에 맞게 현행화 했다.

 

중간에 이 초판을 MEAN Stack을 이용해 게시판 부분을 다시 코딩했고,

 

MEAN Stack 게시판

 

MongoDB, Express.js, Angular.js, Node.js 이걸 묶은 프레임워크가 MEAN Stack이다.

이걸 새롭게 코딩하면서 NoSQL, Node.js 등 새로운 Web 개발도구 들을 경험하게 되었다.

이 후 프레임워크에 대한 호기심이 생겨서 NUXT.js 프레임워크로 다시 홈페이지 전체를 재구축하게 되었다.

 

전체 리뉴얼 1차

 

위와 같은 카드 형태의 랜딩 페이지로 1차 리뉴얼이 되고,

 

NUXT 1차 랜딩 페이지

 

NUXT.js로 전체 리뉴얼된 2차 랜딩 페이지가 만들어졌고,

 

Vuetify 적용된 랜딩 페이지

 

현재 Vuetify.js가 적용된 랜딩 페이지까지 개발이 진행되었다.

Vuetify에서 쓸 수 있는 거의 모든 UI가 다 적용되어 있다.

요즘 최신 추세를 잘 따르고 있어서 이 랜딩페이지를 기반으로 회사 홈페이지를 만들 계획이다.

 

게시판과 하단 UI

 

게시판과 하단의 UI도 Material Design이 적용되어 매우 트랜디하다.

아직도 갈 길은 멀지만 사이트 구축을 위한 기본적인 프레임워크는 완성된 것으로 본다.

앞으로 Vuetify가 2.0으로 올라가는 하반기에는 Apple.com 수준의 페이지도 구현할 수 있을 것이다.

관리자 영역을 보완한 예정이고,

데이타 모델을 전체적으로 다시 설계해 빅데이터와 AI가 들어올 수 있도록 개선할 예정이다.

프론트 개발이 확실히 재미있긴 하다.