스파르타코딩클럽 후기 : 초보 아빠 주부의 레시피 스크랩북 만들기

스파르타와 큰일 낸 후기 이벤트

코딩 온라인 교육 후 변화 : 나만의 레시피 모음 서비스 만들기

저는 지난 2월부터 스파르타코딩클럽 이란곳에서 국비지원 온라인 웹개발 교육을 듣고 있습니다.

2주 정도 강좌 영상을 보고, 막연히 있었으면 좋겠다라고 생각하던 나만의 레시피 모음 서비스를 만들게 된 계기와 진행 상황

을 기록해보았습니다. 아래 링크는 해당 교육의 후기입니다. 필요하시면 참고하세요.

국비 지원 웹개발 교육 수강 후기

[K-디지털 기초역량훈련] 웹 개발 국비 지원 코딩 수강 후기

 

어쩌다 나만의 프로젝트 시작

초보 아빠 : 주방일 머리아포..

2020년 11월 육아휴직을 한 이후로 퇴사를 했다. 지금은 주부의 삶을 살고 있다. 아~ 집안일이 이렇게나 많았던가..?. 쉴틈이 없다, 할일은 너무나 많다. 그 중에 5살이 된 아이의 식사를 준비하는 과정은 즐겁기도 하지만, 지치는 경우도 많다. 요리를 할 줄 알고 못하고를 떠나서, 신경써야 하는 부분이 너무 많다. 난 귀찮아서 안먹는 스타일이지만, 아이가 있으니 그럴수가 없다. 뭐라도 꺼내드려야 한다. 식판 반찬통 하나가 비워있으면, 왜 이건 비워져있냐고 잔소리 하는 아이다. 

• 무엇을 먹일지 식단을 구성하기
• 장보기
• 레시피 찾기
• 레시피 대로 만들기
• 아기의 피드백 반영 -> 레시피 수정

위의 리스트는 아주 단순화 한 것이지만, 디테일하게 들어가면 고려해야 하는 부분들이 많다. 장보고, 요리한 후 남은 재료의 재고처리. 재고처리를 잘 할 수 있도록 내일, 모레 반찬 구성. 설거지를 최소화 하기 위한 최적의 요리 순서 등. 남들은 어떻게 이렇게 매일매일 살아가는지 모르겠지만, 게으른나는 이 과정이 즐겁기도 하지만 부담으로 올 때가 좀 더 많다. 

 

자동화 해볼까?

회사를 다닐 때, 단순하고 반복적인 작업들을 자동화하는데 신경을 많이 썻었다. 그 이유는 일하는 척하고 놀기 위해. 그래서 Excel VBA 공부하고, AutoHotKey를 공부한 다음에 하루에 2분 이상 반복적으로 사용하는 작업은 대부분 자동화 하려고 노력했다. 덕분에 남들보다 같은 일하면서 조금은 쉬는 시간을 더 확보 할 수 있었다. 회사 PC에는 오직 나만을 위한 프로그램들이 야금야금 쌓여갔다. 

주방일도 그렇게 할 수 없을까? 예전에 혼자 계획만 세운적이 있다. 알아서 식단을 짜주고, 알아서 주말이 되면 식단에 필요한거 장봐주고, 당일이 되면 그날 레시피를 던져주고, 난 그냥 그거 보고 하기만 하면되는 루틴으로.. 그리고 나름 수익모델까지.. 그러다가 묵혀놓았다. 이것을 만드는 과정이 하루 아침에 되는게 아닌걸 알기에 그냥 살아왔다. 그 아이디어는 내 Notion 어느 페이지에서 썩어가고 있었다. 지금보니 '우리집영상사'라는 이름으로 저장되어 있다.ㅎ

 

스파르타코딩클럽 내일배움단 : 웹개발 수강 후 변화

그냥 그렇게 하루 하루가 지나가다가, 실업 급여를 받으며 내일 배움카드를 발급했다. 내가 무언가 할 수 있는 시간은 아이를 어린이집 보낸 후 잠깐의 시간과 아이를 재우고 나서 잠깐의 시간만 허락된다. 그래서 약간의 스킬업을 위해 온라인 강좌를 찾아 다니다가 스파르타코딩클럽에서 국민내일배움카드로 수강할 수 있는 강좌가 있는 것을 알고 수강을 했다. 내가 수강한 과정은 웹개발/앱개발 2가지 이다.

웹개발 수강기간은 5주이지만, 빠르게 진행하면 2주안에 모든 강좌를 다 볼 수 있다. 2주안에 다 봤다. 그리고 그냥 이렇게 교양 과목 하나 들은 것처럼 지나가는 것으로 생각했다가, 지난 주 쯤이었나.. 주방에서 아이 밥하는 순간 '생각보다 어렵지 않겠는데..?'라는 생각이 들었다. 복습할겸 만들어 볼까?

프로젝트 진행 중 : 나만의 레시피 모음

프로젝트 이름은 가명이지만, 나만의 레시피 모음으로 정했다. 사실 넣고 싶은 기능은 많치만, 일단 내가 검증한 레시피를 저장하고, 재료/태그로 쉽게 다시 검색하고, 내 코멘트를 추가할 수 있는 것으로 시작하기로 했다. 

구현할 기능들

난 주방에 일할 때 주방 수납장에 핸드폰을 부착하고 항상 보는데, 곧 있으면 저가형 테블릿을 구매해서 주방 수납장에 고정되도록 붙혀서 사용할 예정이다. 그래서 웹 페이지는 태블릿에서 적당히 잘 보일 수 있을 정도로 설정했다. 일단, 구현할 기능을 정리해보았다. 

• 초기화면
  • Database에 있는 모든 레시피를 보여줌
• 레시피 등록
  • URL로 등록
  • URL등록 하면서 코멘트, 재료, 태그를 함께 기록
  • 만개의 레시피 URL 사용할 경우 재료는 자동으로 크롤링 하도록
  • 기존 태그(Database 존재하는 태그)는 체크박스로 선택
  • 신규 태그는 Input 박스로 입력
• 찾기(보기) 옵션
  • 전체보기
  • 재료로 필터링
  • 태그로 필터링
  • 최근 열람순
  • 자주 찾은 열람순
• 레시피 카드
  • 클릭시 연결된 링크로 이동
  • 코멘트 및 태그 수정 가능하도록
  • 삭제 기능

 

디자인

내 가족만 사용할 예정이라, 디자인은 신경 쓰지 않았다. 아니 UI/UX 이런건 또 다른 영역이니, 심플이즈 베스트라고 생각하고 내키는 대로 만들어봤다. 카드 디자인은 여기 저기 샘플을 보면서 내 맘대로 약간 수정했다. 아쉬운건 만개의 레시피 페이지의 썸네일이 가로가 길어서 카드가 어떤 식으로든 이쁘게 나오기 힘들다. 나중에 여유가 되면, 모바일 페이지에서는 목록형으로 보이게 할 생각이다. 

나만의 레시피 모음 디자인

현재 구현 상태 : 레시피 등록 (만개의 레시피 크롤링, DB저장)

레시피는 URL로 등록 하고, 만개의 레시피인 경우 재료가 자동으로 입력된다. 재료, 신규태그는 콤마로 구분하여 입력하는 방식으로 설정하였다. 아래 그림과 같이 레시피 등록 기능을 완성하였다. 레시피를 등록하면 자동으로 Card List를 새로고침한다. 아래 그림은 db에 저장하고, 불러오는 과정이 포함된 것이다. 

레시피 추가하기

현재 구현 상태 : 태그로 찾기, 재료로 찾기 (DB 인덱싱)

등록한 레시피들을 편하게 찾기 위해 태그로 찾는 기능을 만들었다. 태그로 찾기 메뉴 버튼을 클릭하면 db에 있는 모든 Tag를 체크박스형태로 보여주고, 체크박스 클릭이 될 때마다, 모든 Tag 체크박스 상태를 확인 후 매칭되는 레시피들을 아래 화면에 보여준다. 매칭되는 결과수를 표시하도록 추가하면 좋을 것 같다. 

태그로 찾기

지금은 태그로 찾기만 구현했는데, 재료로 찾는 법도 기술적으로 동일하기 하다. 

 

현재 구현 상태 : 카드 수정 및 삭제 (DB수정)

카드 수정 기능을 추가하였다. 해당 레시피로 요리하면서 후기나, 코멘트를 추가하거나, 태그 및 재료를 변경하기 위한 수정이다. 수정 할 수 있는 항목은 아래와 같다

• 재료
• 메모(코멘트)
• 태그 : 기존의 태그에서 선택 or 신규 태그 추가

수정 기능

 

향후 계획 및 후기

이 프로젝트를 시작한지 몇 일이 되지 않아서 구현해야 할 기능은 많치만, 주요한 기능은 구현한 상태다. 이 서비스는 스파르타 코딩클럽 수강 중에 등록한 AWS 서버에 돌렸다. 아래의 링크에 가면 간단하게 테스트 해 볼 수 있다. 비밀번호란을 만들었지만, 테스트하는 동안 기능을 빼놓았다. 부가적인 기능과, 디자인이 어느 정도 마무리 되면 og태그도 추가해야겠다.

사이트 링크

나만의 레시피

나만의 레시피

스파르타클럽 왕초보용 웹코딩 교육 2주를 듣고, 길지 않은 시간내에 내가 편리하게 사용할 수 있는 기능을 만들 수 있어서 뿌듯하다. 이전 다른 영역에서 이것저것 만드는 일을 했지만, 이건 색다른 재미가 있는 것 같다. 캡처로 보면 아무것도 아닐 수도 있는데, 나름 서버, DB 개념도 다 들어가있어서 더 재미있다. 아, 이제 저번에 봤던 레시피 어디있지라며 카톡열심히 찾고, 키워드 이리저리 봐꿔가며 검색을 안해도 될 것 같다. 상상만 하던 것을 웹으로 구현하니까 또 다른 재미가 있다.ㅎ