BalanceDiary 개발 일기 #1 개발 전 화면 설계
개인 포트폴리오 BalanceDiary 개발 일기 개발 전 화면 설계 #1
설계 기간 : 11월 9일 ~ 11월 17일
(건강관리를 위한 식단 가이드라인 제공 & 일기 형식의 나만의 식단 기록, 목표 수립과 달성을 위한 영양적 관리, 회원들간의 식단의 대한 소통 사이트)
본격적인 개발하기 앞서 전체적인 레이아웃 및 디자인 설계 및 기능적인 설계를 진행
Fimga 링크(전체 설계 보러 가기)
Figma
Created with Figma
www.figma.com
사용 Web IDE - figma, erd cloud
구상하게 된 계기 : 첫 걸음마 단계인 개발이기 때문에 분명 많은 시행착오를 겪게 될 것이고, 그렇게 끝없이 벽에 부딪히게 될 텐데 그러면 분명 금방 지칠 수 밖에 없을 것이라 생각하였습니다.
그러한 과정 속에 지치지 않고, 끈기를 갖고 개발하기 위해서는 나 자신도 흥미가 있어야 포기하지 않고, 적극적으로 임할 수 있고, 꾸준히 동기 부여가 되어 프로젝트를 완성할 수 있을 거라 생각되었습니다.
그리하여 원래의 전공 분야인 식품 영양학적 지식과 건강에 대한 관심도가 높아지는 최근 동향을 고려하여 식단 관리 웹페이지를 구상하고 개발 중에 있습니다.
BalaceDiary라는 웹사이트(프로젝트)의 목표 및 설정
계획한 웹사이트의 궁극적인 목적은 사용자에게 알맞은 식단의 가이드라인 및 정보를 제공해주고, 그 정보를 제공받은 사용자들이 식단을 서로 공유하고 소통하고, 섭취한 식단을 기록하고 그 식단의 영양소를 분석하여 보여줌으로써 목표를 스스로 수립하고, 이루어 나갈 수 있도록 하는 웹사이트입니다.
핵심 기능
# 식단 가이드라인 및 사용자에게 알맞은 식단 정보 제공.
웹페이지에 들어오면 가장 먼저 어떠한 식단이 사용자에게 맞을지 선택 또는 설문을 통해 식단을 작성하지 전 영양적 지식이나 건강에 관한 정보들을 참고할 수 있도록 식단의 정보를 제공받을 수 있는데 접근하는 방법을 형태를 2가지로 만들어 보았습니다.
1. 사용자가 직접 메인화면의 동영상과 텍스트의 설명을 읽고 직접 원하는 식단의 가이드 선택
2. 사용자가 아직 자신이 어떤 식단이 본인에게 필요한지 선택이 어려울 경우 사이트에서 설문을 통해 알맞은 식단페이지를 추천해주고 정보를 제공
# Spring MVC 패턴의 프로그램 제작
흔히 모델-뷰-컨트롤러 패턴이라 불리는 사용자 화면, 데이터 전송, 논리 로직을 분리해서 사용하는 소프트웨어 디자인 패턴을 활용.
사용자 화면, 데이터 전송, 논리 로직을 분리해서 사용하는 소프트웨어 디자인 패턴인 MVC패턴의 이해를 바탕으로 Model파트의 정보 및 데이터들을 가공(비지니스 로직) 후 Controller로 데이터와 UI의 소통을 담당 및 Model 과 View가 주고받는 이벤트의 처리, 마지막으로 View 파트로의 보여주고자 하는 모든 것을 화면에 출력하는 프로그램 제작
# 제공 받은 정보를 토대로 사용자가 일기 형식의 게시글 작성(생성, 읽기, 수정, 삭제(CRUD) 가능)
수정 및 추가 예정~~
# 전문적이고 방대한 양의 영양 데이터를 활용하기 이해 공공데이터 활용
식품 영양 데이터DB 활용
https://www.foodsafetykorea.go.kr/api/newDatasetDetail.do
데이터활용서비스
www.foodsafetykorea.go.kr
1. Database 구성에는 MariaDB, HeidiSQL을 사용, 식품 영양 데이터DB의 공공데이터를 받아 방대한 양의 음식의 영양소들을 넣는데 성공했다. 사용자들이 식단을 등록할때 먹은 음식들을 검색 -> 추가할 수 있도록 할 것이다.
2. 식단 등록시 음식들이 추가되는 순간 음식들의 음식명만 들어가는 것이 아닌 해당 음식 값의 이름으로 색인한 영양소들을 함께 삽입.
3. 본인이 작성한 식단(게시글)의 아래 영양소를 보여주는 공간과, 마이 페이지를 통해 날짜별로 섭취한 영양소들을 다양한 그래프 형태로 한 눈에 확인할수 있고 영양소들을 그 것을 사용자들이 보며 본인이 목표설정 및 목표한 바를 잘 이루어가고 있는지, 영양소들을 적절하게 섭취하고 있는지를 보여주고, 관리할 것이다.
# 반응형 설계
화면의 크기에 따라 글자크기 및 이미지 크기가 깨지지 않고 줄어듬은 물론
드롭다운 메뉴로 만들어 두었던 메인화면 상단의 메뉴가 모바일 환경이 되면 햄버거 메뉴로 변경 된다던지, 화면의 4칸을 차지하던 카드들의 레이아웃들이 화면이 좁아짐에 따라 2칸 1칸이 되며, 모든 디바이스의 화면에 맞춰 보여질 수 있도록
글자 크기(font-size) 및 레이아웃 크기(width, height)를 고정된 px이 아닌 퍼센트(%) 및 vw로 값을 설정하고
@media(미디어 쿼리) 및 display : grid, position : flex의 속성들을 통해 모든 디바이스에 환경에 맞게 반응형 레이아웃 설정 및 조절
반응형 구현 부분 코드
/* tablet-dynamic-main */
/* 태블릿 화면 설정*/
@media (max-width: 1024px) {
/* recommend */
.rem-img-box {
width: 100%;
margin: 0;
}
.rem-img-box img {
width: 100%;
}
/* display:grid 를 통해 4열로 정렬해두었던 레이 아웃을 */
/* 태블릿 환경이 되면 2열로 되도록 구현해둔 부분*/
/* collobo */
.collabo-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.collabo-card-img {
padding: 25vw 0 0 2vw;
}
/* offline */
.offline-map-bg2 {
margin-left: 2vw;
padding-right: 2vw;
}
}
/* Moblie-dynamic-main */
/* 모바일 화면 설정*/
@media (max-width: 768px) {
/* recommend */
.rem-content {
top: 40%;
right: 10px;
}
.rem-btn {
right: 10px;
bottom: 10px;
}
/* collabo */
/* display:grid 를 통해 2열로 정렬해두었던 레이 아웃을 */
/* 모바일 환경이 되면 1열로 되도록 구현해둔 부분*/
.collabo-cards {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.collabo-card-img {
padding: 60vw 0 0 2vw;
}
/* display:flex 를 통해 가로 정렬해두었던 레이 아웃을 */
/* 세로로 되도록 구현해둔 부분*/
/* offline */
.offline-wrap {
display: flex;
flex-direction: column;
margin-bottom: 200px;
}
.offline-content-wrap {
width: 100%;
}
.offline-map-bg1 {
width: 100%;
}
.offline-map-bg2 {
width: 100%;
margin: 4vw;
}
}
설계를 해보며 느낀점
기획 및 설계부터 페이지를 구성하는 개발까지 전체적인 흐름을 먼저 만든 후, 차근차근 만들어 나가면서 수업에서 배운 이론적인 지식들을 활용하여 수많은 오류와 시행착오를 겪으며 정말 느낀점은 설계를 미리 해두고 만드는 것과 설계없이 그때 그때 추가하여 만드는 것에는 아주 큰 차이가 있다는 것을 깨달을 수 있었습니다.
예를 들면 화면단을 우선 구성하고 개발을 진행하면 미리 설계한대로 따라가며 개발하면 가이드라인이 되어 막힘없이 개발할 수 있었습니다.
그렇게 설계를 미리 하고 들어갔기에 개발과정에서 시행착오를 많이 줄일 수 있었던 건 맞지만, 그럼에도 아직 첫 프로젝트이다 보니 예상을 벗어나는 상황들과 많은 시행착오를 거쳤고, 그럴 때마다 설계를 조금 더 잘했더라면 하는 아쉬움과 설계가 그 만큼 중요하고 공부와 경험이 많이 필요한 어려운 영역이라는 것을 느꼈습니다.
또한 화면단을 구성하며 기능적인 부분에 대한 설계까지도 이미 마쳐놓고 갈 수 있으며, 그렇게 한눈에 보이는 설계 화면단들과 버튼과 페이지들로 몇개의 로직이 필요한지 쉽게 파악이 가능하며 그 기능들에 따른 Database설계도 하고 시작 할 수 있었기에 설계의 왜 필요한지의 필요성을 느낄 수 있는 좋은 경험이었습니다.