시작하게 된 계기들
1, 2학년때는 마냥 게임을 개발하는 것이 즐거워 학교 수업보다는
내가 하고 싶은 프로젝트를 진행하며 개발을 하였다.
2학년을 마치고 나서 산업체 다니기 시작하였다.
멀어진 학업을 다시 따라 잡을 수 있도록
주말마다 틈틈이 국비지원 학원을
다니면서 공부를 시작했다.
사실상 학원은 기초가 없던 나에게 기초와 시작점을 알려주기에 좋았고,
(DB, JPA, Html, CSS, JSP 등등)
내가 어떤 개발을 좋아하고
앞으로 해야 할지 고민을 해왔다.
간단한 게임들 제작
(57) 플렌이 - YouTube 제작한 게임영상을 올려둔 유튜브
2학년까지 갈피를 잡지 못하며 여러가지 많이 해보며 느끼고
여러 공부를 시도해보았다. 새로운 언어에 두려워 하지 않고
구글검색을 통하여 하나씩 진행해 나갔다.
산업체를 2020년부터 2021년 말에 계약 종료로 2022년에 3학년에 복학하게 되었다.
20, 21년도에는 코로나 학점제가 있었다던데 못받은 것이 뭔가 아깝게 느껴지면서도 오프라인 수업을 들을 수 있어 다행이다는 생각이 들었다.
요리 레시피 안내 시스템
3학년 때 팀 프로젝트를 시작하면서 웹 개발에 관심을 가지게 되었다.
1학기 팀프로젝트는 JavaFX를 이용하여 쇼핑몰을 만들었었는데
서버 클라이언트 통신을 통해 내가 원하는 레시피를 가져오고
그에 맞는 재료를 쿠팡에서 구매 할 수 있게 링크를 연결 해주었다.
주제가 공공데이터 포탈을 이용하여 원하는 프로젝트 개발이었기에
공공데이터포털 (data.go.kr) 공공데이터포털을 이용하여 주변 마트 위치를 가져와 지도에서 알려주고
쿠팡, 만개의 레시피, 백종원 유튜브를 이용하여
Java, JavaFX, MySQL,공공데이터 포털, Python 서버 클라이언트 통신으로 완료하여 가장 높은 점수를 받아 낼 수 있었다.
노트북을 바꾸게 되면서 데이터 관리를 못하여 사진이 없는게 아쉽다.
학교 예약시스템(ClickKit)
덕분에 자신감도 붙기 시작했고,
다음 학기에는 전 학기와는 다른 방식으로 프로젝트를 진행하게 되었다.
JavaFX를 활용하며 공공데이터 포털을 활용해야하는 제약 있는 환경이 아닌 제약없이 캡스톤 프로젝트를 시작하게 되었다.
더불어, 학교 관계자들로부터 기존의 수기 작업으로 이뤄지던 시스템들 중 일부를 개발해 달라는 요청을 받게 되었는데, 그 중에서도 하나를 우리 팀이 맡기로 하였다.
맡게 된 프로젝트의 시작은 코로나가 점점 풀리고 있던 시점에 학생들의
시설물들의 무분별한 사용을 막고자 예약시스템을 만들어 달라고 요청을 하였다.
2주에 한번씩 생활관 담당자들과 미팅을 가지며 요구사항을 받고 기능명세를 하여 다이어그램을 설계 후 스토리보드를 보여주며 프로젝트를 진행하였다.
- 생활관 관리자 요구사항
| 번호 | 요구사항 |
|---|---|
| 1 | 공간별, 구획 별 제한 인원 변경 |
| 2 | 공간별, 구획 별 지정(예약 가능) 자리 변경 |
| 3 | 공간 운영시간 변경 |
| 4 | 연장 가능 시간 및 연장 횟수 변경 |
| 5 | 이용 안내 및 수칙 위반 사항 변경(공간별 설정) |
| 6 | 수칙 위반자 예약 불가 기간 설정 |
| 7 | 사용 당일 자가 온도 체크 기재 부분 |
| 8 | 예약자 관련 모든 사항이 관리자 모드에서 한눈에 확인 및 다운로드 |
- 주요 기능 명세
| 번호 | 요구사항 |
|---|---|
| 1 | 로그인 |
| 2 | 시설 예약, 취소 |
| 3 | 체온 기재 |
| 4 | 이용 안내 수칙 서명 |
| 5 | 제한 인원 변경 |
| 6 | 자리 변경 |
| 7 | 운영시간 변경 |
| 8 | 연장 가능 시간 및 횟수 변경 |
| 9 | 이용 안내 및 수칙 위반 사항 변경 |
| 10 | 예약자 현황 확인 및 다운로드 |
팀원들과 매주 20분씩 회의를 가졌으며 역할을 분담후 프로젝트를 진행하였다.
React와 node.js를 이용하여 반응형 웹페이지를 구현하였다. 
관리자 페이지 예약 페이지를 나누어 구성하였으며 해당 프로젝트를 진행하면서 많은 문제점과 경험을 얻어갈 수 있었다.
해당 프로젝트는 공부를 기반으로 프론트 엔드 백엔드를 나누는 것이 아닌 파트로 나누어 팀원 모두 React와 node.js를 경험 할 수 있었고
node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트인 axios를 이용하여 통신을 진행하였으며 exceljs, cookiejs 등 여러 라이브러리를 활용하여 구현을 하였다.
처음으로 RESTful API로 제작하여 보다 재사용성을 높여 보다 수정하기 용이하게 제작하였다.
개발을 잘 마치게 되어 높은 점수를 받으며 끝났지만 아쉽게도 코로나 격리 해제가 풀리게 되었지만 예상과 다르게 이용에 불편함이 없어 현재 쓰이고 있지는 않다.
그리고 이 프로젝트에는 해결 해야할 문제가 남아있는데 CORS에러 문제이다.
해당 프로젝트를 진행하고 나니 CORS에러가 나기 시작하였고 현재 프로젝트 동작에는 문제가 없어 그대로 진행하게 되었다.
CORS는 Cross-Origin Resource Sharing 이라는 단어로 교차 출처 리소스 공유 정책이라고 해석할 수 있다.
이를 해결하기 위해 동일 출처 정책(SOP)이 필요한데 만약 동일 출처가 아닌 경우 접근을 허용 해준다면
해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting)등의 방법을 이용해서 개인정보를 가로챌 수 있는 것이다.
CORS에러를 해결하기 위해서는 여러가지 방법이 있는데 프록시 서버를 만들어 클라이언트와 서버 사이의 중계 대리점을 만들어 모든 출처를 허용한 서버 대리점을 통해 요청을 해주면 되는 것이다.
보안에 대한 자세한 지식이 없어 많은 골치를 앓았는데 앞으로 공부 해야 할 것들이 한참 남은 것 같다.
kitcse2018/Clickit (github.com) (github 주소)
Kidlet
4학년 1학기도 마찬가지로 캡스톤 프로젝트를 시작하였다.
이번에도 고객의 요구사항을 받아 팀 프로젝트를 진행하면 나중에 있을 프로젝트에 도움이 될 것 같아서
팀원들 끼리 정한 프로젝트가 아닌 지인 중 초등학교 교사의 요구사항을 받아 프로젝트를 시작하였다.
이번 프로젝트는 내가 팀장을 맡게 되어 작업 구성 및 기반을 만들었다.
문제 정의를 간단히 하자면,
전자기기 발달로 인해 인쇄매체 보다는 전자매체를 선호하게 되었고,
학급 친구들과 선생님의 자유로운 정보 전달 및 소통을 위해 추억을 공유하며 정보를 알려주는 Kidlet이라는 학급 홈페이지 앱을 제작하게 되었다.
요구사항
| 번호 | 요구사항 |
|---|---|
| 1 | 매일 학생들에게 도움이 되는 명언 출력 |
| 2 | 학급 게시판 메모지와 같은 게시판으로 서로 소통 |
| 3 | 사진 저장 및 댓글 기능 |
| 4 | 연장 가능 시간 및 연장 횟수 변경 |
| 5 | 학생들의 건의 사항을 선생님에게 익명/실명으로 작성 |
| 6 | 선생님이 학급의 준비물 및 숙제 공지 기능 |
| 7 | 시간표 (선생님이 편집가능) |
이번 프로젝트는 저번 프로젝트의 문제점을 잘 숙지하여 진행하였다.
일단 디자인이 전체적으로 짜임새가 없었다는 점,
보안으로써의 취약점이 있다는점
이 두가지를 중심으로 프로젝트를 시작하였다.
이전까지는 kakaoOven을 이용하여 프로토 타입을 제작하였으나,
기능이 훨씬 많은 BuilderX를 이용하여 제작을 시작하였다.
제작 중 Figma라는 프로토타입 툴을 알게 되었고,
kakaoOven -> BuilderX -> Figma로 옮기면서
디자인을 점차 자리잡게 되었다.
여러 프로토타입과 스토리보드를 만들어
선생님과 미팅을 가져 수정사항과 추가 개선사항을 추가하게 되었다.
마찬가지로 여러 다이어그램으로 설계를 하였고 DB를 설계하였다.
최종적으로 디자인이 정해지고 제작에 들어가게 되었다.
지인이 요구사항을 알려주고 수정사항, 개선사항을 보다 편하게 말해주었다보니 보다 더 많은 기능을 넣을 수 있었다.
이번 프로젝트도 무사히 마칠 수 있었으며 보다 깔끔한 UI를 통해 만족스러운 결과가 도출 될 수 있었다.
학급 홈페이지를 앱으로 만들어야 하다 보니 ANDROID, IOS 모두 호환이 되어야 한다고 생각하여
Cross-Platform 인 React-Native와 Flutter를 고민하게 되었고 점점 올라가는 점유율을 가진 Flutter를 선택하게 되었다.
Flutter는 Dart언어 기반으로 Goggle에서 만든 프레임워크인데
Flutter는 Flutter Document가 아닌 곳에서는 문제점이 생겼을 시 정보가 부족하여 찾기 어려운 점이 있었다.
하지만 그만큼 Document가 잘 정돈되어 있어 차근차근 읽으면 문제를 해결 할 수 있었다.
하지만 너무 생소한 Dart언어를 남은 2~3달 동안 완벽히 숙지하기 어렵기에 FlutterFlow라는 Flutter개발을 위한 온라인 플랫폼을 이용하여 보다 쉽게 제작을 하였다.
서버는 Flutter와 호환이 좋은 Firebase를 이용하였으며 FireStore에서 제공하는 인증 서비스 보안 서비스를 이용하여 보다 안전하게 보안을 지켰으며
무분별한 선생님 계정을 만드는 것을 막기 위하여 공직자 메일(korea.kr)을 통해서만 만들 수 있게 제약을 두었다.
Firebase라는 NoSql을 처음 이용하게 되었는데 원래 설계하던 DataBase와는 접근 자체가 다르게
트리 구조 형식이 신기할 따름이었는데 보다 매력점인 점이 한두가지가 아니였다.
데이터 추가에 있어서 제약이 적어 유연하며 데이터를 읽어오는 속도도 빠르다고 한다.
해당 프로젝트는 현재 앱스토어에 출시 되었으며,
https://play.google.com/store/apps/details?id=com.kumoh.kidlet 링크를 통해서 다운을 받을 수 있다.
현재는 사용이 중단되어 Firebase의 이용료와 Chat GPT이용료를 계속 지불 할 수 없어 하루 데이터 송신 제한이 걸려있다.
학생은 이메일을 이용하여 가입을 진행 할 수 있고
선생님 계정은 @korea.kr이메일을 이용해 회원가입이 가능한 상태이다.
apk 다운로드 주소(PC 또는 직접 다운로드)
https://drive.google.com/file/d/1uoXY0B30-0WAn-YkZKFdpPemkMLBiLYV/view
마치며
3개의 프로젝트와 작은 프로젝트를 진행하면서 웹 개발에 대한 흥미와 관심이 더욱 높아졌다.
Front-End 개발에 대한 즐거움을 느끼며, 그것이 나의 목표가 되었다.
프로젝트를 진행하면서 보다 창의적으로 만들어내는 것이 기쁨을 주었고, 이러한 경험을 통해 멋진 개발자로 성장하고 싶어하는 도전을 하게 되었다.
계속해서 다양한 프로젝트를 통해 더 나은 개발자로 발전해 나가는 것이 나의 목표이다.