안녕하세요. 상명대학교 하계 인턴 최지원입니다.

저는 인턴 기간 동안 42 SEOUL 본과정 학생들을 위한 베네핏 정보 제공 사이트 개발을 진행하게 되었습니다. 이 글에서 해당 프로젝트에서 했던 업무들을 정리해보고자 합니다.

– 42 SEOUL BENEFITS 홈페이지 메인

디자인

맨 처음으로 한 작업은 디자인 정돈 및 확정 작업이었습니다. 제가 프로젝트에 합류하였을 때는, 디자인 템플릿을 사용해서 컨셉 및 초안이 정해진 상태였습니다.

기존 디자인 템플릿에 제휴사의 로고와 베네핏 정보를 넣고, Font Awesome을 사용하여 적절한 아이콘을 배치하는 등 웹의 큰 틀을 먼저 작업하였습니다. 대략적으로 정돈이 되었을 때 시각 디자인 전문가에게 피드백을 받고 디테일을 수정하였습니다.

– Font Awesome 아이콘을 사용한 프로그램 소개

파트너 소개

그다음으로 한 작업은 파트너 소개 메뉴를 수정하는 것이었습니다. 이전 단계까지는 코드 내부에 제휴 내용 등의 데이터를 직접 작성하는 방식이어서, 이후 데이터 수정 및 추가 시 오류가 발생할 가능성이 높았습니다. 그래서 node.js와 express를 사용하여 기업 grid와 상세 페이지 템플릿을 만들었고, JSON 파일로 저장된 데이터를 읽어서 사용하게끔 구현하였습니다.

– 불투명한 로고는 준비 완료, 반투명한 로고는 준비중

상세 페이지에서 오래 고민했던 부분은 기업에서 제공하는 URL을 어디에 어떤 방식으로 연결할 것인지에 대한 부분이었습니다. 기업에서 제공한 이미지에서 클릭하라고 가리키는 부분에 링크를 삽입하면 가장 좋았겠지만, 본문과 이미지 중간에 필요한 만큼 버튼을 만들어 제공하는 형태로 결정하였습니다.

– 구름 상세 페이지의 까만 버튼들

자유 제안 메일 연동

마지막으로 한 작업은 자유 제안 메뉴의 메일 연동이었습니다. 별도의 메일 서버를 가지고 운영할 계획이 아니었기 때문에, 어떤 방식으로 연결할지 고민이 많았습니다. 그러던 중 원하는 기능과 유사한 오픈 소스를 찾게 되었습니다.

해당 코드는 Gmail로 폼의 내용을 전송하고 구글 스프레드시트에 연동하여 데이터를 저장해 주는 기능이 구현되어 있어, 이 웹 페이지에서 필요로 했던 기능과 딱 맞았습니다. 그래서 위 오픈 소스를 사용하였고, 메일과 스프레드시트를 연결하여 베네핏에 대한 자유로운 제안이 가능한 메뉴를 완성할 수 있었습니다.

– 페이지 내의 자유 제안 폼
– 내용을 입력한 후 보냈을 때 연동된 계정에 수신된 메일
– 내용을 입력한 후 보냈을 때 연동된 구글 스프레드시트

마무리

이번 현장실습을 통해 두 달간 인턴을 하면서 새로운 경험을 할 수 있었습니다.

먼저, 웹 페이지를 개발자의 시각으로만 바라보다가, 제휴사와 직접 만나고 회의하시는 매니저님의 시각에서도 볼 수 있었고 시각 디자인 전공의 시야로도 페이지를 볼 수 있었습니다. 다른 분야 사람들과의 협업이 어떤 의미인지 알고 직접 경험할 수 있었던 프로젝트였습니다.

또 위에서 소개하진 않았지만 멘토님, 그리고 다른 인턴분들과 함께 일주일에 한 번 테크 세미나 시간을 가졌습니다. 실무에서 사용하는, 실무에 근접한 내용의 세미나를 통해 학부생에서 조금 더 벗어날 수 있는 시간이었습니다.

시원섭섭한 인턴 기간 끝!