개인 프로젝트 03. - 웹 서비스 개발일지

미국 교환 학생 생활 중 웹 개발 언어를 배우며 직접 제작했던 Toy web service들이다. 주로 불편함을 해결하기 위한 솔루션에서 기반해 서비스를 구현, 배포해 보았다. 아래의 웹에서 모든 프로젝트를 한 눈에 볼 수 있다. 

Preview

https://minse-web-dev-total.netlify.app/

Minse's web project

---

1. Balance Game 웹 게임 개발

https://balance-game.netlify.app/

밸런스 게임

연습을 위해 제작한 기본적인 JS,HTML,CSS를 통해 제작한 첫 동적 웹 페이지이다. HTML 한 페이지에 모든 코드를 작성하고, 입력에 따라 CSS로 각각의 태그들을 on/off 시키는 방식으로 동적 화면을 구성했다. 

---

2. Book MBTI 추천 웹 개발

https://book-mbti-minse.netlify.app/

MBTI Book recommendation

최초로 구글 검색 최적화, 썸네일 및 공유 기능 등을 모조리 넣어본 동적 웹페이지이다. 12개의 양자 일택 선택 문항이 나오고, 그에 따른 MBTI 성향을 파악해 책을 추천해 주는 웹서비스를 기획했다. MBTI 분석을 위해 JS 내에 변수를 할당하고 클릭에 따라 그에 맞는 MBTI 특성 가중치를 증가시키는 방식을 채택했다. 처음으로 JS의 오브젝트 변수를 이용해 본 프로젝트였다.

---

3. Youtube Trend 파악 웹 개발(feat. Youtube API)

https://youtubehot.netlify.app/

Youtube_trend

유튜브에서 요새 가장 핫한 동영상은 뭘까? 유행에 따라가고 싶고, 다른 사람들이 아는건 나도 알고 싶다! 라는 마음에서 제작한 웹 서비스다. 유튜브 API를 이용해 해당 지역의 인기 동영상 리스트를 반환하는 기능을 구현했다. 총 25개의 인기 동영상이 새로고침마다 계속 업데이트 된다.

API를 이용한 첫 웹 서비스라는 점에서 의미 있었고, 실제로 이 서비스를 통해 최근의 트렌드를 엿볼 수 있다는 점에서 효용성이 높은 프로젝트였다.

---

4. 미국 내 더치페이 웹 개발

https://equal-split.netlify.app/

Equal Calculator

미국에선 한국처럼 따로 결제를 잘 안해준다. 이 때문에 항상 영수증을 보고 더치페이 계산을 해야하는데, 세금에 팁까지 별도다. 따라서 정확히 먹은 만큼 내는 것이 정말 어려웠다. 누구는 13달러의 음식을, 누구는 17달러의 음식을 시켰을 때, 세금과 팁도 비율에 맞게 13:17로 분배해야하지 않은가? 이 과정이 너무 귀찮아 한번에 다 계산해 주는 웹 서비스를 기획했다. 각자 자기가 시킨 음식의 금액과 팁의 양을 입력하면, 알아서 비율대로 금액을 나누어 알려준다. 세금은 당시 내가 거주하던 캘리포니아의 세금으로 설정했다.

최초에 입력된 사람들의 수에 따라 뒤의 UI들이 모두 달라져야했기 때문에(누가 무엇을 먹었는지, 누가 얼마를 내야하는지 등을 알려주는 UI는 사람 수에 따라 달라짐) 그 부분을 구현하는 것이 조금 까다로웠다. 

실제로 사용시 대부분 문제는 없었으나, 일부 특수한 레스토랑에서 다른 비율의 세금을 떼가는 경우가 있었다. 추후 커스텀 세금 입력란을 추가해 보완하고자 한다. 

---

5. 출생년도별 십이간지 계산 웹 개발

https://zodiaccheck.netlify.app/

Zodiac

Abstract

GOAL : 외국 학생들에게 한국의 십이간지 띠와 색, 그에 따른 성격을 알려주는 웹사이트 만들기
Benefit : 영미권에서는 생소한 한국의 십이간지를 소개함으로서 문화 교류의 장 형성에 기여
Task : JS,CSS,HTML을 이용한 동적 웹페이지 구현. 특히 주어진 인풋에 따라 '일부'만 변경되는 웹사이트 개발
Solution Method
- 12가지의 십이간지 아이콘 제작
- San Jose University의 대표 색상을 기반으로 웹사이트 UI 디자인
- 입력받은 연도에 따라 그에 맞는 띠 및 색상을 계산하는 로직 구현
- 연도 인풋 예외처리 로직 구현 (숫자가 아닌 모든 입력 및 공백)
- 계산된 띠 및 색상에 맞는 십이간지 아이콘과 색상, 특성 설명을 출력하는 로직 구현
- 방문자수 카운팅 및 표출 기능 구현
- Snapchat 공유기능 구현
- Github/Netilfy를 이용한 코드 저장 및 배포
Tools
- VScode (html, css, js)
- Illustration
- Github/Netlify

Background

PC 용으로 제작했고, 외국 학생들에게 동양의 십이간지 및 띠를 설명해줬을 때 흥미로워하는 것을 보고 기획하게 되었다. 친구들이 자기는 무슨 띠냐고, 무슨 색의 동물이냐고 물어볼 때 매 번 계산하는 것이 여간 성가셨고 이에 연도에 따라 자동으로 계산해서 보여주는 기능이 있으면 좋겠다고 생각했다. 대상이 외국 학생들이였기에 영어로 내용을 구성했다. 

웹 개발 분야에서는 최초의 그룹 프로젝트였다. 교환학생 중 만난 2명의 CS 학생들과 협업을 통해 개발했고, UI/UX 디자인 및 퍼블리싱, 입력 연도에 따라 그에 맞는 십이간지 아이콘 및 색상을 출력하는 로직을 Java Script로 구현하는 역할을 맡았다. 

Review

12개의 동물(쥐,소,범,토끼,용,뱀,말,양,원숭이,닭,개,돼지), 거기다 5개의 색상(청,적,황,백,흑)이 맞물리며 만들어지는 60여 가지의 결과 페이지를 모두 제작해야하는가? 에 대한 고민이 컸다. 어차피 결과페이지의 구조는 동일했고 내용, 아이콘 종류/색상만 입력에 따라 변경해주면 되는 것이라 굳이 60개의 아이콘 제작을 할 필요가 있을까 생각했다. CSS filter 속성을 이용해 기본 흑백 아이콘의 색상을 바꾸고 그에 맞춰 제목/설명의 Inner html  값을 변경하는 로직을 구현했다. 덕분에 12개의 기본 아이콘으로도 60가지 경우의 수를 효과적으로 표현할 수 있었다.

팀 프로젝트로 협업해서 개발하니 훨씬 많은 기능을  짧은 시간에 구현할 수 있었다는 점이 좋았고 그 과정에서 깃허브를 통한 팀원간 코드 공유, 공동 수정 등을 체화해 유익했다. 특히 commit 내용을 살펴보며 팀원이 어떤 부분을 수정했는지를 파악하고 진행 상황을 업데이트 하는 과정에서 커뮤니케이션이 굉장히 중요하다고 느꼈다. 

---

6. SJSU 교내 주요 시설 오픈 현황 및 시간 알림 웹 개발 (feat. REACT)

애초부터 PC보단 모바일 용으로 제작한 UI다. 서비스 특성 상 모바일 환경에서 더 자주 이용될 것이라 판단했다.

https://sjsu-facilities-open-notofficial.netlify.app/

SJSU-Facilities

Abstract

GOAL : SJSU 교내 주요 시설 영업 현황 및 시간을 알려주는 웹 페이지 개발
Benefit : 한 번에 모든 주요 시설의 오픈 현황, 오픈 시간 정보를 제공하여 편리한 교내 시설 이용에 기여
Task : React 앱을 이용한 사용자 모니터 환경에 따라 디자인이 변경되는 반응형 웹페이지 구축 (모바일 중점) 및 버튼 입력에 따라 정보를 띄워주는 동적 기능 구현

Solution Method
- 영업 중 / 영업 종료를 보다 가시적으로 표현할 아이콘 제작
- React 컴포넌트를 이용한 웹페이지 골격 제작 및 모바일 화면에 특화된 반응형 웹페이지 디자인
- 각각의 주요 시설을 표현하는 버튼을 제작 후 클릭시 오픈 현황과 운영시간 정보를 띄워주는 로직 구현
- 코드 유지 및 보수, 배포를 위한 Github 업로드
- Netlifty 플랫폼을 이용한 웹페이지 배포
Tools
- VScode (React, html, css, js)
- Illustration
- Github
- Netlify

Background

2022년 Fall 학기, San Jose State University에서 교환학생으로 수학하던 중 생긴 불편함에 기인해 제작하게 되었다. 캠퍼스 내 시설 중에선 푸드코트, 식자재마트, 도서관, 체육관을 주로 이용했는데, 문제는 이들의 운영시간이 요일마다 거의 전부 다르다는 점이었다. 때문에 방문 전 반드시 구글에 검색해서 지금 오픈해 있는지와 영업 시간 등을 매번 체크해야했다. 이 과정이 너무 귀찮고 비효율적으로 느껴졌다. 다른 학생들, 특히 신입생들 또한 같은 문제를 겪고 있다는 것을 발견했다.

 

이에 매 번 각각 검색하는 것이 아닌 한 화면에서 모든 오픈 여부 및 운영시간을 볼 수 있으면 좋겠다고 생각했고, 손쉬운 개발을 지원하는 React 를 이용한 웹페이지를 통해 해당 서비스를 구현해 보았다.

Review

리액트를 처음 사용해 제작한 앱이였고, 확실히 Vanilar JS보다 훨씬 코드가 간결하고 중복문을 덜 쓰게 되어 편했다. 함수와 진배없는 컴포넌트로 코드를 간소화하는 것이 굉장히 효율적이라고 느꼈다. 다만 선언된 변수를 컴포넌트 내에서 사용하게 연결하는 부분에선 약간 난해했다. 마지막으로, 리액트만의 장점인 update를 이용해 구조를 제작하고 싶었는데 아직은 이해가 부족해 DOM으로 동적 웹을 구현했다. 조금 더 공부 후 update 기능을 사용해 코드를 최적화할 예정이다.

제작한 웹 중 가장 실용성이 높았던 서비스였다. 배포 후 교환 학생 내내 잘 이용했다.

---