[공모전 회고] 2024 공개SW 개발자대회 본선 진출 및 우수작 후기 (과학기술정보통신부x정보통신산업진흥원)

1. 2024 공개SW 개발자 대회

공개SW 개발자 대회는 2024년 18회를 맞이하는 국내 최대 규모 공개SW 관련 공모전이라고 볼 수 있다.

과학기술정보통신부에서 주최했으며 정보통신산업진흥원이 주관한다.

프로젝트 기획, 개발, 구현, 협업 등의 개발 경험과 기능테스트, 라이선스 검증을 통해 공개 SW의 전반적인 개발 과정을 경험할 수 있는 OpenSource관련 가장 큰 규모의 공모전이다. 

 

 

 

2024 공개 SW개발자 대회는 자유과제, 지정과제, 지속발전과제 등 3가지 선택할 수 있는 주제 유형이 존재하며 각 주제에서 수상인원을 분배해서 뽑기에 주제 선택부터 중요하게 선택하여야 한다. 

대회 일정은 예선인 1차평가, 2차 평가 전 멘토링과 출품작 검증, 라이선스 검증을 거치고 본선인 2차 평가를 통해 수상을 결정한다. 상금은 대상의 경우 1000만원 여러 상들을 종합하여 총 5800만원이다. 상금만 두고 봐도 국내 최대 규모의 공모전이라 볼 수 있다.  

---

 

2. 프로젝트 개요

 

Co-Labor프로젝트는 노동자(labor)와 함께(co)한다는 의미에서 지어졌다. Co-Labor에는 여러 기능이 존재하는데, 첫 번째로 외국인 근로자를 위한 기업 정보와 채용공고를 볼 수 있다. 두번째로는 법률 챗봇이다. 한국에서 발생할 수 있는 취업 시장과 근무 중 발생할 수 있는 법적 문제들을 법률 챗봇을 통해 조언을 구할 수 있다. 마지막으로는 지원센터&병원 지도이다. 근무 중 발생할 수 있는 문제들을 해결할 때 도움이 될 수 있는 외국인 노동자 지원센터의 위치와 근처 가까운 병원의 위치를 확인할 수 있다.

 

자세한 개발과정과 협업 방식은 아래 프로젝트 회고에서 볼 수 있다.

[프로젝트 회고] Co-Labor 프로젝트

 

---

 

3. 예선부터 본선까지의 여정

기존에 진행하던 Co-Labor프로젝트를 공개SW 개발자 대회참가를 위해 프론트 부분은 전체 리팩토링을 진행하기로 했다.
공모전 또는 프로젝트를 반복함에 따라 과거에는 보이지 않는 단점들이 점차 많이 보이게 되었다. 
우선 모바일 웹버전과 영어버전 레포지를 과감히 빼고, 완성도를 올리기 위해 웹 레포지에만 집중해서 개발을 진행하였다.

 

예선 준비

 

- CSS관리와 프로젝트 구조 변경

첫 새싹 해커톤 때의 Co-Labor 프로젝트 구조이다. 

Css파일은 관리가 되지도 않은채 왼쪽과 같은 끔찍한 형상을 띈 채 존재하는 것을 볼 수 있다.

또한 CSS의 전역 범위 이슈로 인해 중복 클래스가 발생하면 안되기에, 

.CompanyDetailsCenterCompanyBasicInfo {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin: 0 auto;
  justify-content: center;
}

.CompanyDetailsCenterCompanyImg {
  width: 150px;
  height: 150px;
}

이와 같이 끔찍한 클래스 명이 등장하기도 했다. 

이러한 경우들을 전부 styled-components방식으로 한 파일 내에서 CSS를 관리할 수 있도록 변경하였다.

const ButtonWrapper = styled.div`
  margin: 30px 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

 

그리고 폴더 구조도 src안에 있는 components는 전역적으로 작용할 수 있는 공통 컴포넌트로 분류하고, page안에 해당 page에만 해당하는 components들을 따로 분류해 두었다.

├───assets
├───components
├───hooks
└───pages
   	└───exPage
    	└───exPage.jsx
        └───Components

 

이러한 방법들을 통해 CSS관리와 프로젝트 구조를 변경하여 이전에 발생한 문제들을 해결할 수 있었다.

---

 

- props driling을 막기 위해 Context도입

props drilling를 막기 위해 Context를 도입하였다.

import { createContext, useContext } from 'react';

기업정보면 기업 정보 관련 컴포넌트들은 백에게 fetch 해서 받아온 기업 정보를 Context로 전달해 주고, 채용공고면 채용공고 데이터를 Context로 전달해 주었다.

 

---

 

- 페이지 번역 기능 추가

구글에서 특정 텍스트에 대한 번역은 api호출을 통한 번역이 가능하다. 페이지 번역의 경우 찾아보다 보니, Google Translate Website Translator로 가능하다는 것을 알게 되었다. 



- 구글 페이지 번역 스크립트 불러와 페이지 모든 html에 적용하기.

    const addGoogleTranslateScript = document.createElement('script');
    addGoogleTranslateScript.src =
      'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    document.body.appendChild(addGoogleTranslateScript);

위와 같이 Google Translate Website Translator를 모든 html에 적용도록 하였다.

 

[React.js] 구글 페이지 번역 (전체 번역 및 언어 선택 버튼)

 

---

 

- 메인화면 변경

const [webTitle, setWebTitle] = useState(''); // 웹 페이지 제목을 저장할 상태 초기화 (초기값: 빈 문자열)
const [count, setCount] = useState(0); // 현재 타이핑 중인 문자의 인덱스를 저장할 상태 초기화 (초기값: 0)
const completionWord = 'Co Labor'; // 완성될 타이핑 문구를 상수로 저장

 

webTitle이 처음 시작 문자열이고, 완성 됐을 때 문자열은 completionWord이다. 이후 count라는 state를 통해 현재 몇 번째 글자인지 구별한다. 

count가 단어 길이에 도달하면 인터벌을 중지하여 애니메이션을 멈추고, 컴포넌트 언마운트 시 인터벌을 정리하여 메모리 누수를 방지한다.

[React.js] 리액트 글자 타이핑 효과 구현 (직접 구현/전체 코드)

 

 

 

원페이지 스크롤은 react-full-page라는 라이브러리를 사용하지 않고, State를 활용하여 구현하였다.

전체 적인 구조는 Wrap이라는 height가 큰 컴포넌트가 존재하고, 안에는 각 페이지에 해당하는 container가 존재한다.
스크롤을 내리거나 올릴 때마다 화면에는 container가 바뀌면서 보여진다. 

즉 Wrap이라는 아주 긴 페이지를 스크롤에 맞게 한 container부분만 보여주는 구조이다. 

[React.js] 리액트 원페이지 스크롤 구현 (직접 구현/스크롤 유도)

 

---

 

- 리스트 데이터 최적화 (더보기 버튼+ 스크롤)

데이터가 많을 때 이를 한 번에 모두 렌더링 하면 성능 저하로 이어질 수 있다. 특히 스크롤을 통해 추가적인 데이터를 보여주는 무한 스크롤 방식은, 성능 최적화를 위해 사용자와의 상호작용에 따라 데이터가 로딩되도록 하는 것이 중요하다.

Intersection Observer와 더보기 버튼을 활용해 특정 위치까지 스크롤이 되면 추가 데이터를 로딩하고, 버튼 클릭 시 모든 데이터를 표시하는 방식으로 컴포넌트를 구현하였다.

 

[React.js] 리액트 최적화를 위한 Intersection Observer 사용 (더보기 버튼/스크롤)

 

---

 

 

 

 

본선 준비

 

예선에서부터 프론트 전체의 리팩토링을 진행하면서 본선에 진출한 것을 알게 되었다. 본선에 진출한 이후에서부터는 개발보다도 라이선스, 보안, 주제 구체화에 더 힘을 쏟았던 것 같다.

 

본선에 진출한 이후부터는 여러 멘토링과 교육이 있었다.

주제에 관련하여는 관련한 복지부에 계시는 분에게 주제에 대한 활용가능성과 피드백에 대한 멘토링을 진행하였고, 개발 관련하여서는 우리 펠리컨팀에 멘토분 한 분이 붙어 비대면 멘토링뿐만 아니라 개별 질문도 받아주시기도 하였다. 개발 관련 멘토링에서 http통신으로는 보안이슈가 있기에 https통신으로 구현하는 것이 좋을 것 같다는 피드백을 받았다.

 

멘토링뿐만 아니라 라이선스의 특강을 통한 교육을 받을 수도 있었다. 공개 SW 개발자 대회는 결과를 위한 프로젝트 개발뿐만 아니라 다양한 멘토링 및 교육을 통해 많이 성장할 수도 있었던 것 같다.

 

- Https 배포

 

프로젝트 소개에서 아키텍처를 보면 왼쪽과 같은 배포 구조를 확인할 수 있다.
기존 첫 Co-Labor버전에서는 S3만 사용하여 Ec2 백엔드와 연결만 되어있는 상태였는데, 공개 SW 개발자 대회 멘토링 과정에서 https 배포는 어떠겠냐는 의견을 듣고 SSL인증서를 통해 https배포를 마치게 되었다.



이 과정에서도 백엔드 팀원과 나 모두 배포에 아는 지식이 많지 않았기에, https 첫 연결에서 많은 어려움이 존재했다. 배포가 연결이 안 되는 상황에서 CloudFront가 문제 인지, Nginx가 문제인지 알 수 없었기 때문에 팀원과 거의 하루 종일 붙어서 문제를 해결했던 기억이 있다. 결론적으로는 Nginx의 CORS문제였지만, 덕분에 Nginx와 CloudFront가 어떻게 동작할 수 있는지 파악할 수 있게 되었다.

 

---

 

- 라이선스와 리드미

 

공개 SW 개발자대회인 만큼 github가 매우 중요하게 작용하였다. 예선에서도 대부분 심사위원 분들이 발표자료 및 시연영상보다 깃허브의 기록 및 관리를 중요시하는 것을 알고 있었기에, 우리 팀은 깃허브리드미와 라이선스 고지에 매우 신경 쓰기로 하였다.

 

각 FE, BE레포지에 QuickStart가 따로 존재하고, Organization 리드미에 프로젝트 소개, FE와 BE가 같이 존재하는 Deploy레포지에 Quickstart가 존재한다. 또한 모든 리드미는 한/영 버전을 지원하며, FE와 BE, AI 레포지에는 Apache License 2.0으로 오픈소스 등록까지 완료하여 고지되어 있는 것을 확인할 수 있다.

 

Pelicans

 

 

 

본선 발표

 

 

이렇게 전반적인 리팩토링과 gitHub 관리 및 라이선스를 완료하고, 본선 발표를 하러 서울 서초구에 openUp센터에 방문하였다. 방문했을 때 웰컴 키트로 카카오 웹캠블라인드(?), 스티커, 스타벅스 쿠폰, 카카오 종합장을 받을 수 있었다.

 

팀별로 발표시간 10분, 질의응답 시간 5분으로 구성되어 있었다. 다른 팀이 있는 공개적인 큰 장소에서 발표하는 것이 아닌, 대기실에서 대기하다가 순서가 되면 심사위원 분들 대략 10명이 있는 방에 들어가 발표를 하는 방식으로 진행되었다.

 

공간이 협소하여 입장은 2명만 가능하다고 하였지만, 직원분에게 나머지 2명은 질문대비를 위하여 발표는 하지 않고 우측에 따로 대기하고 있겠다고 설명하고 4명 모두 입장하였다.

 

다른 공모전 들에 비해 발표 시간이 넉넉하기에, 시간에 쫓기지 않고 발표를 잘 마쳤던 것 같다. 

아쉽게도 수상은 하지 못했지만, 국내 최대 규모 공개 SW개발자 대회에서 본선에 진출하고 우수작으로 선정되어 많은 것을 배울 수 있는 좋은 경험이었다.

 

---

4. 결과 및 성과

 

- 본선 진출 및 우수작 선정

 

- 라이선스 등록 및 오픈소스  타인 사용 사례

---

 

 

5. 후기 및 느낀점

 

- 공개 SW 개발자 대회에 맞는 오픈소스 프로젝트를 해야 한다.

주제가 일반적인 웹/앱 프로젝트의 경우 높은 성적을 내기는 힘들다. Co-Labor의 경우 사회적 약자 문제 해결에서 사용할 수 있는 AI와 웹 사이트이다. 이는 오픈소스로 크게 작용하기 힘들다. 간단히 말해서 전체의 코드를 가지고 다른 프로그램을 만들기 쉽지 않다. 부분적인 함수들만 가져다 사용할 수 있는 수준이다. 이와 같이 일반적인 웹/앱 프로젝트는  공개 SW개발자 대회에서 좋은 성적을 거둘 수 없다.

무슨 뜻이냐? React vite환경에서 사용하는 SWC은 2023 공개SW 개발자 대회 대상작이다. 실질적으로 이처럼 모든 사람들이 사용할 정도로 유용한 고수준의 오픈소스 제작이 목적인 대회이다.

내년에 다시 공개 SW 개발자 대회에 참가하게 된다면, 이와 같은 근본적인 오픈소스에 대해 고민하고 나가보려 한다.

 

- 프로젝트를 진행하면 할수록 눈에 보이는 것이 달라진다.

프로젝트의 이름만 같은 Co-Labor를 크게 3번 리팩토링을 하였다. 프로젝트를 아예 지우고 새로 nobase부터 리팩토링을 시작하기도 하고, 부분적으로 수정하기도 하였다. 이러한 과정에서 이전에 내가 작성했던 코드들이 얼마나 데드라인에 쫓겨 생각 없이 작성한 코드인지, 유지보수에 얼마나 큰 비용이 들어가는지 뼈저리게 느낄 수 있었다.

React에서 문법을 적절히 사용할 줄 알면, '과연 뭘 잘해야 React를 잘하는 것일까?'라는 고민을 한 적이 있었다.

이 부분을 프로젝트를 한번 한번 제대로 진행할 때마다 정답이 더 구체화되었다.

어떻게 상태관리를 해야 할지, CSS관리를 해야할지, 프로젝트 구조를 구성해야 할지, 컴포넌트를 어떻게 효율적으로 분리해야 할지, 많은 데이터를 최적화하는 방법과 같이 위 질문에 대한 정답들을 얻어갈 수 있었다.

 

 

- 데드라인에 쫓긴다고 너무 조급해하진 말자.

데드라인에 쫓기면서 완벽하게 하기 위해 압박감에 오히려 조급해지고 실수를 많이 하는 것 같았다. '완벽할 수는 없다는 것을 인정하고, 최선을 다하는 방향으로 임했으면 더 좋은 결과가 올 수 있지 않았을까?'라는 생각이 드는 경험이었다. 

 

 

- 2024년 펠리컨 팀 모두 고생 많았습니다!💪