2021.10 - 2021.12

본 포스팅은 과거 프로젝트 진행 회고 글입니다.

프로젝트의 시작

이번 학기는 정말 바쁘게 보낸 것 같다. 예비창업패키지만 종료되면 평화롭게 살 줄 알았는데 개발에 재미가 붙어 이제 본격적인 서비스들을 양산할 계획을 세웠다. 4학년이다보니 나 또한 취업을 준비할 필요가 있었으며 이에 따라 이력서를 작성하는데 이를 문서로 작성하려다 보니 일일히 레퍼런스들을 참고해야 되서 불편한 점이 많았다.

그래서 자유로운 사용자 설정(커스텀)과 쉽게 어디서나 접근 가능한 이력서 제작 사이트를 개발하기로 하였다. 원래 백엔드쪽은 스프링을 주력으로 개발하였지만 새로운 도전이라는 명목으로 1년 좀 넘게 이탈했던 나는 다시 고향(?!!)인 스프링으로 개발하기로 마음먹었고 본격적으로 기획을 하기 시작하였다.

이력서란 무엇일까 고민해보는데

기획이 중요하다! 구현은 어떻게든 하게 되어있다. 기획/설계에 집중해보자

이력서는 무엇일까? 나는 내 자신을 사람들에게 소개할 때 개발쪽으로 진로를 잡고 있는 개발자라고 말을 한다. 일반 사람들이라면 "음 프로그램을 만드나 보군!"하고 넘어가겠지만 비슷한 IT 계열의 사람들은 자신들의 분야가 워낙 넓다보니 "그래서 어떤 개발을 하는데?"라고 물어본다. 그러면 뭔가 만든게 많으면서도 설명하는데 애를 먹었던 적이 많은 것 같다.

워낙 웹으로 만들 수 있는게 많다보니 "핀테크 쪽에 관심 있는데 이거를 웹으로 구현하고 있고, 만들고 싶은게 있으면 다른 프레임워크로도 개발하는 중이야!"라고 둘러대는데 사실 자기를 소개하는데 시청각 자료만큼 효과적인게 없다. 이럴 때에 효과적으로 자기를 소개할 수 있는 것이 이력서이다.

단순히 취업하려는 회사에 자기를 소개하는 것 뿐만 아니라 누군가와 협업을 할 때도 "저는요! 이런 기술을 사용해 본 적이 있고요! 또한 이러이러한 경험을 했어요!! 그러니깐 이렇게,저렇게 해서 분업을 잘 해봅시다"를 말할 수 있는 대체제이기도 하다.

어떻게 만들어야 할까?

다양한 경로 및 상황별로 볼 수 있게 만들자

위의 점들을 고려하여 사람들에게 자신을 소개하는 이력서를 다양한 경로로 보여줄 수 있도록 기획하였다. 먼저 웹사이트다보니 당연히 자신에게 부여된 이력서 주소를 통해 웹상으로도 보게 하였고 일반적인 제출 형태인 프린트 포맷을 따라가게 하였다.

또한 상황에 따라 다양한 이력서를 만들 때가 많다. 아마 어느 기관이나 회사를 지원할 때 모두 똑같은 이력서를 제출하지는 않을 것이다. 따라서 한 회원당 여러개의 이력서를 만들 수 있도록 구현하였다

사용자에게 자유로운 환경을 제공하자

대부분의 기관/회사별 요구하는 질문/제출사항이나 보여줘야할 자료가 다르기 때문에 이에 대해서도 고민하였는데 이 문제를 해결하기 위해 ppt나 다른 프로그램처럼 위젯 개념을 탑재하였다

고정된 포맷이 아닌 여러개의 탬플릿 포맷이나 포스팅 에디터를 넣어서 상황별로 여러 위젯들을 사용자가 만들고 이를 적절한 위치에 조립할 수 있도록 구성하였다. 이 과정에서 데이터 베이스가 많이 복잡하게 구성되었던 것으로 기억한다.

백엔드/DB 개발 진행

프로젝트 개요

• 백엔드 : Spring
• 프론트엔드 : html,css,js,jquery,angular.js
• 배포환경 : AWS EC2, S3, Route 53
• DB : 테스트 h2, 배포시 mariaDB (mysql)
• 도메인 : 가비아

데이터베이스(DB) 기획/구성

먼저 데이터베이스는 테스트용으로는 h2를 배포용으로 Mariadb를 사용하였다. 그동안 스프링으로 개발할 때 설정값만 바꾸어 쉽게 DB를 갈아끼웠는데 최근에 업데이트도니 mariadb 호환성 문제 때문에 (한글 인코딩 문제, JPA ORM COLUMN,TABLE 이름) 꽤나 고생하였다.

AWS를 배포환경으로 설정하였으면 RDS를 사용하면 되지 않느냐는 질문이 생길수도 있다. 사실 처음에 RDS를 사용하려다가 나중에 요금이 비싸게 청구할까봐 그냥 EC2에 mariadb를 설치하여 이용하기로 하였다. (EC2는 30G까지 무료이다)

DB 구성에서 중요하게 생각한 첫번째는 확장성이다. 나중에 사용자가 자신만의 템플릿을 만들거나 다른사람이 만든 템플릿을 갈아끼울수 있도록 위젯 개념을 탑재한 DB를 구성하였다. 이 때문에 DB 참조 관계가 매우 복잡하게 구성되었다. 하지만 위대하신 JPA ORM 형님은 역시나 구성에 많은 편함을 주었다. (SQL 쿼리 작성이 귀찮은 것은 아니다...)

백엔드 구성

먼저 가장 많이 사용되는 패키지 설계대로 프로젝트를 구성하였다.

• controller : url 경로 매핑
• converter : 데이터베이스나 엔티티 사용할 때 가끔 특정한 형태로 타입 변경할 때가 있어 여기에 구성하였다.
• domain : 도메인 객체로 구성된다. entity는 여기 들어간다고 보면 된다.
• repository : DB 접근시 사용하는 클래스들을 모아두었다.
• service : 비지니스 로직을 여기에 두었다. 사실 간단한 거는 controller에 구성할까 고민하였지만 이왕 하는김에 사소한 비지니스 로직 하나하나 모두 여기로 옮겨 controller 클래스들을 깨끗하게 만들었다.
• role : storage 부분과 spring security 부분을 여기에 두었다.
• test : dummy data 관련해서 로직 짤 때 여기에 만들었다. 주로 이력서 에디터 시스템이나 탬플릿 구성하는데 더미 데이터를 이용하였다.

뭔가 클래스가 많이 만들어질 것 같지는 않았는데 만들다 보니 조금 많아진 것 같다. 최근에 intellij를 사용하기 시작했는데 너무 편하다 다들 꼭 쓰자. (필자는 무료 버전을 쓰다가 너무 편해서 돈 주고 구매하였다)

백엔드 시스템에서 나중에 확장할려는 부분은 인증 시스템인데 이는 현재(2022년) 개발중인 SSO(Single Sign On)을 붙여 여러개의 서비스를 개발하더라도 하나의 인증 시스템으로 구성하려고 한다. 현재 KeyCloak을 커스텀하여 여러가지 테스트 중에 있다.

프론트엔드 구성

메인페이지

본인의 가장 약점은 디자인을 잘 못한다는 점이다. 먼저 메인페이지의 경우는 css 템플릿을 가져왔고 해당 프로젝트에 맞게 수정하였다. 로그인한 회원과 비회원 사용자 모두 사용할 수 있게 하였으며 UI는 전체적으로 심플하게 구성하였다.

템플릿은 추후에 사용자가 만든 것도 공유 가능하게 바꿀 예정이지만 현재는 가장 많이 사용되는 이력서 형태를 제작하고 이를 등록하였다. 먼저 개발의 핵심 비지니스 적인 부분만 구현을 완성하고자 하였다.

에디터 (비회원, 회원 둘다 이용 가능)

에디터의 경우 "티스토리"의 에디터 모드 형태를 많이 참고하였는데 옆에 바로 미리보기가 나와서 정말 쉽게 블로그를 구성했던 기억이 났다. 나 또한 사용자가 쉽게 사용할 수 있도록 미리보기 페이지를 옆에 띄우고 생성이나 프로필 블록들의 순서, 편집창 클릭 등의 작업은 해당 페이지에서 실시간으로 보면서 진행할 수 있도록 구성하였다.

쉽게 에디터 포맷을 말하자면 프로필은 여러개의 블록으로 구성되며 블록은 프로필 상 한줄영역을 뜻한다. 블록 하위에는 여러개의 컴포넌트를 가질 수 있는데 실제 내용이 들어가는 요소는 바로 이 컴포넌트이다. 이 컴포넌트 사이즈 조절을 통해 한줄영역을 분할하여 사용이 가능하다.

블록 분할 영역은 Bootstrap의 반응형 grid 시스템을 사용하였으며 전체 한줄의 사이즈는 12이다. 위의 사진처럼 컴포넌트 사이즈를 각각 6으로 설정하여 두개의 컴포넌트를 하나의 블록 하위에 두면 위와 같이 같은 사이즈로 분할되어 표시된다.

웹형, 프린트 형

기획한대로 오프라인 이력서 형태로 인쇄할 수 있는 인쇄형 포맷과 웹 사이트에서 감상 가능한 웹사이트형 포맷으로 두개의 경로를 구성하였다. 인쇄형 포맷의 경우 최대한 A4 사이즈에 맞게 블록들을 구성하였고 블록간 경계를 합쳐서 기존 오프라인 이력서 형태인 페이지 형식으로 인쇄할 수 있도록 하였다. 인쇄하기 버튼을 클릭하면 실제로 인쇄가 가능하다. (인쇄 기능은 기본 브라우저 제공 기능이다.)

결과물

Passprofile 핵심 기능 동작 영상 (클릭)

Passprofile 파일 업로드(이미지) 및 문서 에디터 영상 (클릭)

후기

사실 여러가지 기능들을 더 넣고 싶었지만 일단 핵심적인 기능부터 넣고 추후 업데이트를 진행하기로 하였다. 최근 목표로 잡은 것들이 있는데 웹개발에서 자주 사용하는 기능들이나 필수적/선택적인 요소들을 전부 모듈화 하여 gitlab(이것도 유료버전 사용이 아닌 cm버전으로 가져온뒤에 커스텀 하여 ec2 서버로 올릴 것이다)에 옮기고 이를 조립하는 형태로 프로젝트를 개발하는 것이다.

먼저 첫 모듈화의 대상은 SSO 통합 인증 시스템인데 해당 인증시스템을 구현한다면 매번 프로젝트마다 인증시스템을 구현할 필요 없이 한방에 해결된다. 이 외에 여러가지가 있지만 이들부터 차례대로 개발한 뒤에 서비스 프로젝트에 이들을 붙여 더욱 완성도 높고 생상성 빠른 프로젝트를 진행할 것이다.