HTML / CSS, UI, 시연영상, JS/Jquery를 통한 구매목록저장

1. Front-End Project
팀명 : 한솥
팀장 : 이수진
팀원 : 남서아 양선경
진효선 최혜인

2. Contents
정보구조도
&
흐름도
step 1
화면설계
&
화면구현
step 3
디자인 컨셉
&
목업
step 2
주요 기능
&
설계 내용
step 4
step 5
2
Review

3. 진효선
UI, 목록
&
정보구조도, 화면
영상제작
이수진
상세보기
&
흐름도
남서아
장바구니
&
컨셉 및 벤치마킹,
화면설계
양선경
장바구니
&
컨셉 및 벤치마킹, 화
면설계
최혜인
결제 및 주문서출력
&
목업
Introduce our team!
3

4. 정보구조도 (Structure Chart)
4

5. 흐름도 (Flow Chart)
5

6. 6
디자인 벤치마킹
- 한솥도시락 로고 - 홈페이지

7. 7
디자인 벤치마킹
- 메뉴판 - 키오스크

8. 색상 (Main Color)
#FED432 #DE7534 #C42038
8
디자인 컨셉 (Concept)
폰트 (Font - Style) Noto Sans KR

9. A
E
B
C
F
1. A
: 상단에 메인 로고 노출
1. B
:카테고리 선택 탭 구성
1. C
:탭 클릭 시 영역에 메뉴 및 이미지 정보 노출
1. D
:메뉴 선택 시 추가 가능한 사이드
메뉴 팝업 등장
1. E
:장바구니 영역으로 선택한 메뉴정보와 금액
이 실시간으로 보여지며 수량 조절 및 취소가
가능하도록 구현
1. F
:결제 및 취소 부분으로 ‘결제’ 클릭 시 결제 창
으로 연결
9
화면설계 (Layout System)

10. 목업
OVEN 주소 : https://ovenapp.io/view/EW6Ng9TseFY6YqPxw9aUEWSGwNubPHL6/08LFh
10

11. 화면구현
11
1)메인화면 2)매장/포장 선택 3)세부메뉴선택
4) [팝업] 사이드메뉴선택 5) 장바구니에 반영 6)결제수단선택 7) 영수증

12. 화면구현

13. 화면설계 및 디자인
13

14. 화면설계 및 디자인
14
✔️

15. 화면설계 및 디자인
15

16. 화면설계 및 디자인
16

17. 화면설계 및 디자인
17

18. 화면설계 및 디자인
18

19. → 배열에 넣은 메뉴+토핑 리스트 출력
콘솔출력
19
화면설계 및 디자인

20. → 카트에서 메뉴 수량 변경
20
화면설계 및 디자인
콘솔출력

21. 화면설계 및 디자인
21
총 합계 (도시락+
사이드)

22. 화면설계 및 디자인
22

23. 화면설계 및 디자인
23
메뉴 전체 삭제

24. 화면설계 및 디자인
24

25. 화면설계 및 디자인
25

26. 화면설계 및 디자인
26

27. 화면설계 및 디자인
27

28. 화면설계 및 디자인
28

29. Review
진효선
이수진
자바 프로젝트처럼 콘솔로 출력만 되고 끝나는 프로젝트가 아니라 좀더 시
각화되어있는 프로젝트라서 최대한 예외나 여러가지 상황을 디테일하게
빠뜨리지 않고 처리하기 위해 노력했다. 하고나니까 약간 허무한 느낌도 들
지만 하는 동안 많은 공부가 되었던 프로젝트였다. 팀원들도 학원에 나와
같이 하고 모두 열심히 하는 분위기라서 즐겁게 진행했다. 맨처음에는 반응
형 웹을 생각해서 구현하고 싶었는데 주말안에 빨리 UI를 끝내는게 목표였
어서 못했던 게 아쉽다. 그렇게 생각하니 그냥 완성되있던걸 가져다 쓸껄
하는 후회도 들고.. 그래도 하는 내내 즐거웠던 프로젝트였다.
우선 팀원들에게 너무 시간을 재촉한거 같아서 미안한 맘이 들었고, 팀원들
이 다들 너무 열심히 하고 잘하는거 같아서 저도 더 열심히 해야겠다는 생
각이 들었습니다.
css 작업을 많이 해보지 못해서 사이즈 맞추는게 가장 힘들었던거 같습니
다. 다행히 UI잘하는 팀원이 있어서 도움이 많이 되었습니다.
코로나로 인하여 팀원 한명이 중도하차 했지만 5명이 으쌰으쌰해서 프로젝
트를 잘 완성 한거 같아서 기쁜마음입니다.
29

30. Review
양선경
장바구니 파트를 맡아 장바구니 배열을 생성하여 선택된 데이터들을 넣어
야했는데 처음 부분부터 구현이 되지않아 어려웠습니다.
한가지가 해결이 되면 다음 부분에서 막히는 상황이 반복되었지만 팀원들
과 강사님의 도움 덕에 간신히 구현을 할 수 있었습니다. 이번 프로젝트를
진행하며 설계부터 차근차근 해나가는 것이 중요하다고 느꼈고 앞으로 팀
원들에게 피해가 가지 않도록 열심히 공부해야겠습니다..
도움을 주셔서 정말 감사합니다 ㅎㅎ
남서아
제일 어려웠던 부분이 장바구니에서 배열을 오브젝트로 생성하는 부분이
었는데, 이해하는데도 오래걸렸고 구현하기도 쉽지 않았다. 만들려는 의지
만 앞서다 보니 계속 순서가 뒤죽박죽 얽히면서 오류가 떴는데 데이터 설계
시 작업 단위를 쪼개서 계속 콘솔에 찍어보며 확인하는 습관이 필요하다고
생각했다. 힘들었지만 팀원들이 많이 이끌어준 덕분에 완성된 결과물을 낼
수 있었다. 모두 감사합니다 ♥
양선경
30

31. Review
자바랑 비슷하면서도 또 다른 자바스크립트,,,처음에는 자바보다 쉽게 느껴졌지만,
프로젝트를 진행하면서 실제로 써보니 훨씬 더 까다로운 언어란 게 느껴졌다. 그
리고 단순히 JS뿐만이 아니라 HTML, CSS 세 가지를 유기적으로 연결 - 적용해나
가면서 진행하는 작업이 어려웠고, 어떠한 경우에 어떤 함수를 써야하는지 100%
아는 게 아니라 60%만 아는 경우가 많아서 공부 부족에 대한 아쉬움이 있었다. 막
히는 부분이나 CSS적인 부분을 팀원에게 도움받아서 해결했는데, 개인 공부를 통
해 다음 프로젝트에서는 도움을 받는 게 아닌 도움을 주는 입장이 되어야겠다고
느꼈다.
최혜인
31

32. 감사합니다 !
Thank you : )
32
by team Hansot