미니 프로젝트 : 우리 술, 짠

[기획과정] 

why 전통주 추천 서비스?

 

사실 기획과정은 수월했다. 이번 미니 프로젝트는 개발과정을 경험하는 것에 초점을 맞추어 실제 고객을 분석하고 가치가 있는 서비스를 만들기보다는 '실현가능성'에 초점을 두고 기획을 하라고 했다. 가장 중요한 포인트는 "그래서 우리가 이 기능을 과연 코드로 구현해 낼 수 있을까?"이었다. 팀원 각자가 padlet을 이용하여 생각나는 소재를 브레인스토밍 하듯 미리 던져두고, 실현 가능성 및 흥미를 고려하여 소거하는 방식으로 서비스 소재를 정했다.

 

그리하여 정해진 것은

1) 팀원들 모두가 적당히 흥미 있고(술),

2) 만들기도 어렵지 않다고 '생각'이 들며(추천이라고 했지만 결국 필터와 유사하다.),

3) 데이터를 구하기도 쉬운(전통주는 공공데이터에서 무료 API를 얻을 수 있었다.)

 

'전통주 추천 서비스' 였다. 서비스 제목은 투표를 통해 결정된 '우리술, 짠' (tmi : 치열했던 2위 후보로는 '주모'가 있었다.)

 

---

[업무분담]

보통 업무에서는 디자인/ 프론트엔드/ 백엔드/ 기획으로 일을 분담하겠지만, 우리는 배우는 입장에서 모두 각 분야를 조금씩 배워보는 게 얻어가는 것이 더 많다고 판단했다. 하여 처음엔 기능별로 업무를 배분해보고자 하다가, 페이지 별로 중복되는 기능도 있고 핵심 기능과 부수 기능의 업무량 차이도 커 결국엔 페이지별로 업무를 분배하였다. (페이지별 업무 분배는 나중에 페이지를 합칠 때 상당히 번거롭다는 단점이 있다는 것을 추후에 깨달았다.)

 

---

[와이어프레임과 완성본]

기획 후 피그마를 사용하여 와이어프레임을 작성했다. 팀원 6명이 동시에 피그마를 제작하니 레이어가 약간 중구난방이 되긴 했으나, 그래도 대략적인 틀 완성!

이 와이어프레임에 논의해봐야 할 것들과 수정사항을 써넣다 보니 와이어프레임에 점점 덕지덕지 텍스트가 붙었다. 피그마는 텍스트 기반의 커뮤니케이션을 하기에는 한계점이 있는 것 같다. 

 

간단한 윤곽을 그려 와이어프레임을 완성했다. 각 화면에 고려해야할 요소들을 추가로 쓰고, 전체적인 flow를 check해 보는 용도.

 

 

이후 각자 개발을 진행하다가 완성본의 필요성을 느껴 디테일하게 디자인까지 고려하여 피그마 완성본을 제작했다.

 

디자인이 구린 것은 어쩔 수 없다. 우리는 코딩하느라 머리가 다 빠져 지금 디자인에 신경쓸 겨를이 없기 때문이다.

 

 

---

[수많은 개발 난항들]

나는 설문 페이지를 맡았다. 꽤나 고난도의 페이지였는데, 실력에 상관없이 사다리 타기를 했기 때문에 내가 맡게 되었다.. 일단 나의 개발적 지식이라고는 스파르타 코딩클럽의 웹개발 종합반을 수강한 것이 다이기 때문에 -그것도 이제 막- 시작하려니 뭐부터 해야 할지 엄두가 나질 않았다. 그래서 우선 구글링을 했다.(구글 없이 못 살아 정말 못살아) 그리고 아래 강의를 찾았다. 

 

 

https://www.inflearn.com/course/%EC%8B%AC%EB%A6%AC%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91/dashboard

[무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의

 

 

내가 구현하고자 하는 기능과 상당히 유사한 강의였다. 유레카! 난이도도 초보인 나에게 딱 적합한 정도였다. 그래서 본 강의를 베이스로 개발을 첫걸음을 내디뎠다.  

 

 

  1. 화면 전환

처음 기획단계에서는 화면이 전환되면서 설문 결과 데이터가 계속 저장되며 이어져야 한다고 생각했다. 그런데 이걸 구현하려면 데이터 저장을 위해 DB가 필요했다. 딱 봐도 복잡해 보였다. 이걸 내가 어떻게 구현하나, 싶을 찰나에 앞서 공유해 둔 강의에서 DB를 사용하지 않고 다른 방식으로 구현하는 법을 소개해주었다. 바로 화면이 전환된 척하는 방식. 그러니까 비교해 보자면 아래와 같다. 

 

 

• 각 설문 결과마다 다른 페이지로 생성하여 데이터를 넘기는 방식 (일반적이나 데이터가 저장되어야 함)
• 한 페이지에로 구현 후 각 설문을 display: block/ none으로 보이게 하는 방식 ☞ 이 방법으로 채택!

이게 무슨 뜻이냐 하면, 예시로 설문 시작 버튼을 누르면 설문지로 페이지가 넘어가는 것처럼 보이게 기존 html 요소를 display: none;으로 바꾸고 새 요소를 display: block;으로 변화시킨다. 그러면 전체 url은 바뀌지 않고 동일한 화면이나 보이는 것이 달라져 화면이 넘어간 것 '처럼' 보이게 된다. 실제로는 화면이 전환되지 않았으니 데이터는 그대로 유지된다. 

 

 

새로운 방식을 알게 되어 신나게 강의를 따라서 코드를 쳤으나 첫 시도는 장렬하게 실패했다.

분명하라는 대로 했는데 실행이 되지 않았다. 문제가 무엇일지 분석해 보니,  

1. 철자 확인 : id 값 오타가 있어 고쳤다. 하지만 여전히 안된다. 
2. js 함수를 html에 바로 붙여 넣으니 된다 : 그럼 페이지를 불러오는 코드에 문제가 있을 것이다.
3. 폴더가 다름: js 함수는 다른 폴더값에 있었다. 경로를 수정하여 넣어주었다. 근데도 여전히 안된다.
4. defer 추가 : 강의에서는 js 함수 <script></script> 를 끝에다가 삽입하라고 했는데 나는 헤드에 넣어두고 있었다.

defer을 추가하니 드디어 된다!

 

결과 : 성공은 했지만 여기까지 만들고 프론트엔드 개발자 지인에게 기존에 이미 웹상 업로드된 테스트 설문 서비스 html/css를 공유받았다. 그래서 내가 만든 조잡한 버전은 시원하게 폐기하고 전달받은 코드를 템플릿 삼아 다시 만들었다. 지금까지 한 것은 공부한 셈 치기로 했다. ^^ 해피엔딩~

 

---

 

  2. 설문 결과값을 도출하는 방법

누가 봐도 자명하게 제일 난항인 부분이었다. 공유받은 코드를 사용할 수 있을까 살펴보니, 설문 결과를 취합하는 방식이 달랐다. 이런 테스트/설문류는 결괏값을 보통 점수제로 취합한다. 각 설문의 보기에 특정 점수를 주고 점수의 총합으로 결과를 나누어 보여주는 방식이 사용된다. 공유받은 코드도 input에 class를 넣어 각 class 마다 점수를 주는 식이었다. 

하지만 우리는 술 '추천'을 위한 설문이다. 각가의 질문이 유기적으로 연결되어 점수를 더하기보다는 분류를 위한 필터에 가깝다. 그래서 좀 더 다른 방법이 필요했다. 그래서 생각해 본 게 아래 2가지 방법이다. 

 

 

•  점수제

웬만하면 가지고 있는 코드를 이용하고 싶어, 처음 생각한 것은 '점수제 같지 않은 점수제를 만들 수 있지 않을까?'이다. 그러니까 10진법을 단위로 하여 각 설문마다 특정 값을 주고 그 특정값과 데이터를 연결한다면? 즉 설문 보기와 데이터 사이에 점수가 끼는 방식이다. 그러나 결국 이방식을 폐기한 이유는 우선 1) 정의해야 할 id 값이 너무 많아지고(각 설문 보기마다 만들어야 하기 때문에) 2) 결과에 반영되는 설문이 5가지여서 점수가 만의 자리 수까지 길어진다. 3) 총 600가지의 경우의 수가 만들어져서 너무 많다. 그 경우들에 데이터를 일일이 넣어줘야 하는 것도 어마어마한 노동력이 들것이다, 등의 문제가 있었기 때문이다. 그래서 아래 방식으로 생각을 전환했다. 

 

 

• 설문 결과와 데이터 짝짓기

가장 이상적인 방식은 각 설문지를 click 하면 우리의 데이터에 맞는 값이 바로 보이는  것이다. 그런데 문제는 이걸 어떻게 구현해야 할지 모르겠다는 것..^^

위에 올려둔 강의에서는 질문과 답변 자체를 Json 형식으로 데이터화해두었다.

 

{q: '질문', a: [{answer:'보기 1', type: []}, {... }, ]}

(답변 부분은 array로 이루어진다.)

 

그래서 이 데이터를 html로 불러오는 innerHTML 함수를 사용하여 데이터 자체를 HTML화 한다. 

function goNext(){
	var q = document.queryselector('.qbox');
    q.innerHTML = qnalist[0].q;
    }

 

이것도 좋은 방법이었지만, 우선 1) 수작업이 필요한 데이터가 있는데(단맛, 탄산여부, 향), 수작업 전에는 아예 설문 화면 자체를 만들 수 없다는 단점이 있었고, 2) 제일 메인 문제는 swiper 효과가 먹여진 기존 html에 이걸  집어넣으니 자꾸 css가 깨지는 현상이 발생했다. 

 

그래서 다른 방식으로 해결하기로 했다. 기존 템플릿에 있는 <input> 함수가 있어 이걸 변형해 보는 방향으로 길을 잡았다. <input> 함수에 value값을 넣고 그 value 값으로 데이터를 불러오는 로직을 짰다. console.log로 콘솔창에 띄워보니 결과가 나쁘지 않았다. 

 

 

결론 : input 함수의 value값을 사용해서 데이터 가져오기!

 

---

  3. input 값 radio 문제

그렇지만 input 함수는 크나큰 단점이 있었으니...

1. input 함수의 type을 hidden으로 두니 click 시 value 값이 선택되지 않았다.
2. 그래서 type을 radio로 변경하였는데,
3. 두 번째 문제 발생. 버튼은 큼지막한데 라디오의 그 동그란 부분 안을 꼭 눌러야지만 데이터가 보내졌다.
4. 스와이프를 보기 버튼 자체에 class로 두어, click 하면 넘어는 가는데 데이터가 보이지 않는 문제가 발생한 것이다. 

 

 

여기서 저 동그라미(radio)를 정확하게 눌러야 value 값이 저장된다...

 

 

이걸 해결하기 위해 정말 몇 날며칠을 구글링 하다가, 찾아냈다! 아래 블로그에서 내가 딱 찾고 있던 해결방법을 알려주었다. 

 

https://velog.io/@bellecode20/input-label-%EB%B2%84%ED%8A%BC%EC%9D%84-%ED%81%B4%EB%A6%AD%ED%96%88%EC%9D%84-%EB%95%8C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B0%9C%EC%83%9D%EC%8B%9C%ED%82%A4%EA%B8%B0

[CSS] input label 버튼을 클릭했을 때 이벤트 발생시키기

 

▶ 즉, 블로그 내용을 요약하자면 <div> 안의 <label> 구조를 <label> 안의 <div> 구조로 바꾸라는 것. (자리 스위치!)

 

---

  4. 무수히 많은 코드 문제들 : 주로 <div> 문제

사실 저렇게 해두고도 우여곡절이 많았다. 갑자기 페이지 전환효과가 없어져서 멘붕이었는데 알고 보니 </div>가 하나 빠졌다던가.. 1번 문제를 클릭하니 2번은 패스되고 3번 문제가 보이는 문제들. 이 문제는 click 시 넘어가는 효과가 input과 div에 두 번씩 중복되어 나타나는 문제였다. 더불어 css의 여러 사소한 문제들.. background 중첩이라던지... 

 

세줄정도로 짧게 썼지만 저 사소한 문제들로 거의 4일을 날렸다. 개발자 지인에게 물어물어 겨우 해결했다. 눈알 빠지게 코드의 오류를 찾다가 노트북을 부수고 싶다는 충동이 살짝 일었다. 팀원분은 이 프로젝트를 진행하면서 인터넷과 모든 사이트가 너무 소중해졌다고 하셨는데, 무슨 느낌인지 천 번 만 번 공감이 된다. 개발자는 정말 대단하다.

---

5. 설문페이지와 결과페이지 연결 

설문페이지와 결과페이지가 각각 다른 html 파일이었기 때문에 jquery 함수를 통해 연결해 주었다. 이거는 구글링 하니까 쉽게 찾을 수 있었다. result.html의 url을 넣어주니 연결 성공!

 

$(location).attr('href', 'url 넣어주기');

---

 

6. 데이터 보내기 (설문 → 결과)

그리고 끝판왕 등장... 설문값으로 db에 데이터를 호출하는 마지막 관문이 남았다. 얘는 정말.. 모르겠다..^^ 처음엔 ajax를 써야 한다는 사실도 몰라서 파이썬 파일을 만들어두고 이제 어떻게 이걸 연결하지? 하고 있었다.

 

결과페이지는 만드신 팀원분과 이 기능으로 대화가 조금 엇갈렸는데, 데이터를 가져오는 방식에서 서로 다른 루트를 생각하고 있었다. 우리는 설문 html과 결과 html을 나누어서 만들었는데(담당자가 다르므로) 설문 페이지의 데이터를 받아 서버에서 그에 맞는 결괏값을 받은 뒤 결과 페이지에 가는 이 일련의 과정에서 차이가 생긴 것이다. 

 

1. 설문 html에서 ajax로 파이썬 파일에 설문 결괏값을 보낸다 → 파이썬은 받은 결과값으로 서버와 연결에 알맞은 데이터를 추출하고 →결과 html에서 그 값을 ajax로 가져온다.

2. 설문 html에서 결과 html로 설문 결과값을 보낸다 → 결과 html 내에서 ajax로 파이썬에 결과값을 주고 그에 맞는 데이터를 받아온다.

 

내가 생각했던 방법이 1이고 팀원분은 2였다. 각자가 생각하는 것대로 구현을 해보고 먼저 되는 사람 것으로 하기로 했는데 팀원분이 먼저 성공하시어 2번 루트로 이 문제를 해결했다. (나는 아래 나올 cors 문제로 골머리를 앓고 있었다..) 2번 루트는 html 간 localstorage 함수를 이용하여 데이터를 옮기는 형태라고 한다. 이후 ajax는 1번과 동일!

 

---

7. Cors 문제 : 미제 사건

나는 이런 어이없는 곳에서 내가 무너지게 될 줄은 몰랐다. 왜인지 다른 팀원분들은 다 잘 넘어가는 문제에서 내 컴퓨터에만 오류가 발생했다. 바로 cors 문제인데, 아래 블로그에 친절하게 cors가 무엇이고 어떤 오류를 가지고 오는지 나와있으니 궁금하신 분들은 참고해 보시길. 

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

개발 응애인 나는 이 문제를 생전 처음 보았고, 처음에는 chat gpt의 도움을 받았다. 이 친구(chat gpt)는 flask-cors를 라이브러리에서 설치한 후 뭐 어떻게 해보라는 건데 설치하고, 코드를 넣고 하라는 것들을 다해봐도 오류가 없어지지 않았다...

진짜 GPT와 많은 대화를 나누었는데 아래는 그 일부.

 

 

 

이때 돌고도는 물레방아라는 것을 깨닫고 약간 혈압이 올랐다...

CHAT GPT가 위 참조해 둔 블로그에서 해결방법으로 보여준 Access-Control-Allow-Origin도 시도해 보라고 했는데, 여전히 안되었다. 프록시 서버를 통해 해결할 수도 있다고 했는데 이것도 실패. 마지막으로 크롬 익스텐션을 설치하는 방법도 있었는데 얘도... 실패했다.

https://aljjabaegi.tistory.com/337

크롬 크로스도메인 이슈 CORS 간단히 해결하는 방법

 

정말 마지막까지 이문제로 골머리를 썩이고 있었는데, 아예 통합본 파일을 다른 팀원으로부터 받아서 열어보면 그때까지 받았던 스트레스가 무상하게도 너무 잘되는 것이 아닌가? 이유는 아직도 모르겠다. 누가 알려주실 분...? 분명 똑같은 파일인데 왜 내가 합치면 안 되고 다른 곳에서 합쳐온 건 되는 건지.. 여하튼 이 문제는 미결이지만 어찌어찌 프로젝트는 이어갈 수 있었다.

---

 

  5. github 사용하기

우선 어설프게 만든 (대충 만들지는 않았지만 결과물이 초라해서 마음이 아프다.) 내 파트를 팀원들과 공유하기 위해서 github을 사용해 보았다. 왜 프로그램은 같은데 노트북에 따라 프로그램 UI가 다른 걸까. 나는 팀원분들과 다른 화면으로 마지막까지 헤매다가 겨우 연결할 수 있었다.

 

커밋, 푸시, 풀의 개념이 흥미로웠다. 각자 수정사항을 푸시하고 그걸 다른 컴퓨터에서 확인하는 과정이 재밌었다. 그렇지만 아직 git은 너무너무 어렵다. (내걸 올리고 그걸 git에서 찾는데도 한참 헤맸다.. 온라인판 미로 같은 느낌)  그래서 처음에는 깃헙을 쓰다가 후반부 가서는 그냥 파일 압축해서 카톡으로 보내곤 했다.^^

 

 

 

[배포]

 

설문페이지만 적어두었지만 우리에겐 꽤나 많은 기능이 있다 :)

 

녹화_2023_02_15_16_08_38_283.mp4

4.07MB

 

깃헙 주소

https://github.com/moonheesoo1997/ourdrinkjjan1.git

GitHub - moonheesoo1997/ourdrinkjjan1

 

 

그래도 결국엔 배포를 했다! 팀원분들과 으쌰으쌰 해서 만들어낸 소중한 결과물... 올리고 나니 후련한 마음이 제일 컸고, 이제는 전통주를 쳐다보기도 싫은 마음 반과 내 (피) 땀눈물로 일궈낸 소중한 자식 같은 마음 반이 뒤섞였다. 이 미니프로젝트는  2주간의 짧은 시간이었지만... 그 와중에 오프라인으로 팀원분들의 얼굴을 뵌 건 딱 한번뿐이었지만... 거의 매일 만나다시피 하며 공통된 문제로 함께 고민하다 보니 깊은 유대감을 가지게 되었다. 모두들 나아가시는 길 대성하시길 바라며....✨

개발의 '개'자도 모르는 상태에서 몸으로 부딪히며 만들어낸 프로젝트였다. 정말 힘들었지만 이 경험이 추후 개발자와 커뮤니케이션을 할 때 소중한 자신이 될 것 같다는 확신이 든다. 

 

 

+ 여담인데 미니프로젝트 제출날에 갑자기 우리가 이미지 데이터를 가져오는 더술닷컴 사이트가 다운되었다. 그래서 모든 이미지가 엑박으로 뜨기 시작... 결국 양해를 구하고 제출을 했는데, 그다음 날 다행히도(?) 원상복구 되어 이미지도 탈없이 잘 보였다. 마지막까지 정말... 험난했다.