[모두의 단어] 영어 단어 웹사이트 만들기
프로토타이핑, Nuxt, 웹 크롤링, 뉴모피즘
안녕하세요. 한상훈입니다. 오늘 만든 웹사이트는 영어 단어를 외울 수 있는 '모두의 단어'입니다. 평상시에는 만들고 브런치에 올리고, 끝냈는데 이번엔 유뷰트 영상으로 만들어봤습니다. 위의 영상을 보시면 제작 과정을 보실 수 있습니다.
1. 프로토타이핑 디자인
드리블에서 검색한 뉴모피즘뉴모피즘 디자인을 참조해서 디자인을 했습니다. 뉴모피즘은 배경색을 부드러운 종이처럼 느낄 수 있도록 약간 회색을 씁니다. 모든 컴포넌트의 배경색을 되도록 일치시켜주고, 버튼에 들어가는 그림자를 통해 컴포넌트가 눌릴 수 있는 것처럼 디자인합니다.
2. 단일 페이지 앱 개발
특별히 서버를 필요로 하지 않는다면 프론트 엔드 라이브러리만을 이용해 SPA를 만드는게 가장 빠르고 쉽습니다. 특히 애플리케이션 형태로 작동되야 한다면 더욱 좋은 선택입니다. 저는 언제나 Vue를 React보다 선호하기 때문에 Vue로 제작을 했고, 언제나처럼 Nuxt로 만들었습니다.
Vue 프로젝트가 이닌 Nuxt 프로젝트를 쓰는 이유는 라우트 구성이나 파일 아키텍처 등에서 더 빠르게 작업할 수 있을 뿐더러 차후에 프로젝트를 키워 Universial App으로 변경할 때도 간편합니다. SEO 처리도 당연히 더 간편하구요.
3. 데이터 저장과 관리
처음 아이디어에는 외운 영어 단어를 저장하고, 담고 뺄 때 "쿠키에 저장하면 되겠다." 싶었습니다. 그런데 생각보다 쿠키에 넣는게 멍청한 짓이더라구요. 쿠키는 문자열 형태만 받다보니 객체 형태를 매번 parse해서 바꿔줘야 하고, 이 과정에서 데이터 폼이 박살날 수도 있죠. 그럼 곤란하기 때문에 localStorage로 처리했습니다. 훨씬 더 쉽게 관리되는 방법이죠.
4. 단어 획득 및 처리
영어 단어를 획득하는 과정이 빠졌습니다. 따로 영상으로 찍어두질 못해서 그랬는데, 웹에서 크롤링 한 단어 파일을 JSON 포멧으로 변환한 후 동일한 형태의 데이터 스타일로 변환합니다. 이게 생각보다 오래 걸렸습니다.
5. 배포
도메인을 보시면 아시겠지만 netlify 사용했습니다. 두말할 나위 없이 가장 편하기 때문입니다. 빌드 관리도 너무 쉽고, github에 코드만 푸시하면 알아서 빌드, 배포를 진행합니다. 일정 트레픽까지는 무료기 때문에 비용 걱정도 거의 없구요.
영어 단어 공부하고 싶으실 때 아니면 다같이 영어 단어 퀴즈 같은거 하실 때 사용하시면 재밌을거 같습니다.
이제 간간히 사이드 프로젝트를 할 때 브런치와 유튜브 동시에 올리려고 합니다. 유튜브는 이제 막 시작해서 부족한 점이 많은데, 구독, 좋아요, 댓글 모두 감사합니다. 많이 피드백 해주세요.
감사합니다!
https://www.youtube.com/channel/UCSQRF8yIhSMVRXhIqLxQnsw
