Project(프로젝트)

직접 개발한 포트폴리오 사이트

juundev 2024. 5. 29. 17:48

들어가며

나, 그리고 지도 교수님을 위해

본인은 2024년 2월에 4년제 대학에서 소프트웨어 공학을 전공하며 졸업했다.

 

졸업을 앞두고 4학년 1년은 할 것들이 정말 많았다. 힘든 만큼 내가 이룬 것도 있지만 말이다.

몇 개월은 인공지능을 활용해 서비스 가능한 시스템을 졸업 작품으로 연구하고 개발했다. 또 몇 개월은 그 시스템을 인정받기 위해 논문을 두 차례 투고했다.

한국컴퓨터정보학회(KSCI)에서 구두 발표하고 우수논문상을 수여받았고, 한국전자통신학회에 게재되었고 KCI에도 등재되었다.

게다가, 이 졸업 작품이 성공적으로 개발되도록 방향을 정하는데 도움을 주신 지도교수님과 함께 특허도 출원했다.

 

내 이름으로 된 특허가 있다니,, 다시 생각해도 나의 지도교수님은 학생들을 위해서라면 가시밭길이라도 걸어가시는 분이셨다.

표현하자면 용감하지만 사납지 않으며, 역동적이지만 불안감을 주지 않고, 억세지만 아름다운 분이셨다.

 

그분의 학생인 것이 자랑스러웠고, 학문 그 이상의 것을 배울 수 있었다고 생각한다.

실패와 좌절

실은, 본인은 2024년 1월부터 미국 LA에서 웹 애플리케이션 개발자로서 인턴을 할 계획으로 나는 설레는 마음을 가득 안고 미국으로 향했다.

 

미국에 도착하고 인턴십을 진행하기로 한 회사와 연락이 되질 않아 출근 전 직접 찾아가 인사를 드리고 무사히 입국했다는 보고를 드리고자 했다.

 

그렇게 나는 맛있어 보이는 사과 한 박스를 사들고 회사로 향했다.

 

가벼운 인사를 나누고 업무에 대한 설명(OT)을 진행하던 도중에 이상한 말을 전해 들었다.

내가 맡게 될 업무는 웹, 앱 개발이 아니라 방송국 스케줄 관리 및 촬영 보조라고 했다.

 

분명 계약서에는 내가 속한 부서는 Software Development 부서이고, 하게 될 업무는 사내의 Web Application Devleopment & Maintainance (웹 애플리케이션 개발 및 유지보수)였다.

 

회사와 인터뷰 당시에도 두 차례 확인하는 질문을 던졌다. 제가 하게 될 일이 FE/BE 개발자로서 웹이나 애플리케이션 개발 일이 맞나요?

맞다고 하셨고, 오퍼를 수락했다.

 

뜻대로 되지 않는 게 인생이라 했던가, 나에겐 미국에서 일하며 살아보고 싶다는 약 10년간의 꿈이 무너지는 순간이었다.

 

 

그렇게 아쉬우면 그냥 그 일을 하면서 살지?

그렇지 않다. 아무 일이나 하면서 미국에 정착하고 싶지 않았다. 

결론적으로 그건 내가 원하는 미국에서의 삶이 아니었다. 내가 잘하는 일을 미국에서 하고 싶었고, 그걸 발판 삼아 비상하리라는 목적을 가지고 향한 곳이라 그런가 보다.

 

나는 그 순간 간절한 만큼 좌절했다.

그 회사 말고 다른 회사로 이직해 보자는 마음에 취업을 연계해 준 에이전시와 노력했지만, 현재 매칭되는 회사는 한인기업이고 개발자 직군 채용이 없었다.

잠시 방송국 일을 하면서 기다릴까 했지만, 미국이라는 나라에서는 여러모로 생각해야 할 것들이 많았다.

생활을 하기 위해 집을 구해야 하고 대부분 계약 기간은 6개월이었다.

이직이 언제 확정날 지 모르는 상황에서 금전적으로 리스크가 컸다. 그리고 내가 희망하는 직군이 1년 내에 나올 거라는 보장도 없었다.

 

나는 착잡한 마음을 안고 한국으로 돌아가기로 마음먹었다. 정말 쉬운 결정이 아니었다. 밤새 고민하고 또 고민했다.

 

그래도 일어나야지

한국으로 돌아와서 일주일 동안은 멍했다. 그 누구도 만나고 싶지 않았고, 지금 무엇을 해야 하는지도 생각나지 않았다.

그냥 쉬고 싶었던 것일 수도 있다. 

동기들이 취업 준비를 하던 4학년 2학기 내내, 나는 미국 인턴십을 준비했기 때문에 놓쳐버린 것도 많았다.

 

정신을 차려야지라고 생각한 순간부터 한국에서 취업 준비를 위해 내가 잘했던, 하고 싶었던 코딩을 했다.

사이드 프로젝트를 구상하고 개발을 하며 한 달 정도 시간을 보냈다. 

그리고 한 달간 정보처리기사 자격시험을 준비했고 지금은 결과를 기다리는 중이다.

기사 시험을 준비하는 동안에는 정말 욕심을 냈다.

나는 시험을 준비한 기간이 짧지만, 지금까지 열심히 했고 할 수 있다는 생각만 했다. 더 이상 무언가 주어진 일을 피하고 싶지 않았다.

 

지금은 시험 결과를 대기하고 있으면서 "내가 나를 믿는 정도"가 "최선을 다했던 내가" 결과가 되어 돌아올 것을 믿는다.

 

정면돌파, 유일한 방법

 

그렇다, 이제 더 이상 피하지 않을 거라 다짐했고 내가 정한 목표에 갈 수 있는 유일한 방법은 정면돌파뿐이었다.

 

포트폴리오 사이트 개발한 내용을 적는데 주절주절 뭘 많이 적었다.

이런 건 다른 카테고리에 적어야 하는데, 나름 스토리가 있는 프로젝트여서 적어보았다.

 

이젠 본론으로 들어가 프로젝트에 대해 적어보려고 한다.

 

포트폴리오 사이트 설계 및 개발

개발자라면 나만의 블로그나 포트폴리오 사이트를 배포하고 싶을 것이다. 

 

우선, 개발자로서 내가 지금까지 어떤 프로젝트를 진행했고 어떤 역할에서 무엇을 했는지 가장 잘 나타낼 수 있는 포트폴리오 웹 페이지를 개발하고자 했다.

 

디자인은 Figma로 여러 번 수정 작업을 거쳤고, 개발은 Next.js와 함께 했다.

 

왜 Next.js를 썼을까

특별한 이유는 없다. 지금까지 컴포넌트 기반 언어인 React를 사용하거나 Node.js의 ejs로 프런트엔드를 개발했는데, Next.js라는 프레임워크를 사용해보고 싶었다.

서버 사이드 렌더링(SSR)의 개념에 대해서도 공부해보고 싶었고, 새로운 방식의 폴더 구조 기반 라우팅 방식도 흥미로웠다.

* 하지만 아직까지 Next.js를 사용하여 동적 라우팅을 완벽하게 구현할 수는 없다. 왜냐하면 Next.js는 빌드 시에 동적 주소에 대한 페이지 생성을 함께 하여 최적화를 하기 때문에, uuid와 같은 새롭게 생성되는 라우트 주소일 경우에는 404를 반환하기 때문이다. 그래서 빌드 시 동적 라우트 주소를 미리 지정해야 한다.

자세한 내용은 다음 포스팅에서 다뤄 볼 예정이다.

 

데이터베이스 활용

포트폴리오 사이트에 들어갈 내용들을 저장할 방법을 찾다가 로컬 파일에 관련 정보를 디렉터리로 만들어 넣기로 했다.

내가 아닌 다른 사용자는 웹에서 수정하거나 추가할 일이 전혀 없기 때문에, mysql이나 firebase같은 데이터베이스를 연결하지 않아도 충분히 가능한 일이라고 생각했다.

 

데이터베이스 폴더 구조

 

데이터베이스 데이터

이와 같이 필요한 데이터를 적절하게 불러 사용하기 쉽게 구조를 정의하고 데이터를 저장했다.

 

이 방법은 데이터베이스를 사용하지 않아도 되는 규모의 프로젝트에서는 정말 유용하지만, 변경이나 추가 발생 시 재빌드를 하여 배포해야 한다는 단점도 있다.

 

개발된 화면 및 설명

메인화면 - 랜딩

이 화면에서는 내가 디자인과 코딩 둘 다 좋아한다는 것을 어필하고 싶었다. 

마우스를 화면에 올리면 흐릿한 부분이 선명해지는 디자인을 해보았다.

 

메인화면 - 자기 소개

 여기는 좌, 우로 화면을 나누어 간단한 소개와 모토, 학부생 때의 경험과 내가 생각하는 나의 강점을 적어보았다.

스크롤을 하면 가운데 검은색 바가 점점 내려오면서 글자들이 나타나는 디자인을 적용했다.

 

메인화면 - 기술 스택

이 화면은 내가 사용가능한 기술 스택을 자세하게 기술한 섹션이다. 

이 기술에 대한 이해도가 어느정도인지 Badge를 만들어 표시했다.

 

메인화면 - 경험

신입인 나는 경험이 그리 많지 않다. 학부생 때 진행했던 인턴십과 AI+X라는 융합 연구원 활동을 한 것을 제외하면 적을 게 없다...

 

메인화면 - 프로젝트

여기는 지금까지 진행했던 프로젝트의 명칭과, 투고한 논문 및 특허, 수여받은 상장을 적어봤다.

Badge를 만들어 깔끔하고 직관적인 디자인을 하려고 노력한 거 같다.

 

프로젝트 화면 - 모두 보기

여기는 진행했던 프로젝트를 모아둔 곳이다. 

배포하여 실행가능한 프로젝트들은 Badge로 표현하였다.

 

프로젝트 상세 화면에서는 내가 진행했던 프로젝트에 대한 자세한 내용을 기술했다.

 

정리

지금까지 포트폴리오를 개발하기 전에 내가 겪었던 일들을 소개했고, 실제 개발한 포트폴리오 사이트에 대해서 적어봤다.

 

기술적인 내용은 적지 않았지만, 대단한 기술이 들어간 프로젝트가 아닌 것도 맞는 거 같다.

 

본 프로젝트에서는 재사용 가능한 컴포넌트를 만들어 사용하고자 했고, 가독성과 유지보수성을 신경 써서 클린 코드를 작성하려고 노력했다.

 

해당 페이지는 gh-pages를 통해 배포했고, 아래는 포트폴리오 웹 페이지의 링크이다.

 

포트폴리오 사이트 보러가기