열 세번 째 세선

안녕하세요. 여러분들 새해가 밝았네요.
저는 GDSC 웹코어 송민선입니다.
이번 세미나에서는 제가 했던 외주 개발 프로젝트를 애자일 프로세스에 맞춰 이야기 해보고자 합니다.


기획

저희 지난 세미나에서 나구리가 알려줬던 SW 개발 프로세스 기억하시나요?
개발 프로세스로서

  1. 계획
  2. 설계
  3. 구현
  4. 테스트
  5. 전개
  6. 유지

이렇게 진행이 됩니다

그 중 기획부터 이야기를 해볼게요.

저는 프로젝트에서 개발자로서 참여하였기 때문에 개발만 참여해도 별 문제는 없습니다.
하지만 팀 내 개발자가 없는 경우다 보니, 저는 기획단계부터 어느정도 참여를 하여 프로젝트에 기여하였습니다.

주로 업무들은 슬랙과 오프라인 미팅을 통해 진행이 됩니다.
당시 아웃소싱으로서, 20년 경력의 기획자, 서울과학기술대학교출신의 디자이너, 그리고 개발자로서 제가 참여하였습니다.

기획자의 주도하에 회사와 서비스를 논의하고, 더 나은 솔루션을 제공해준 후 그것을 문서화 하는 작업을 진행합니다.

그 결과 기획문서가 완성이 되고, 이 기획문서에는 여러분들이 소프트웨어 공학시간에 배웠던 기능 요구사항, Information Architecture, 다이어그램등이 있습니다.

디자인

디자인과정에서는 회사와 디자이너가 브랜드를 만들어가는 과정인 BI/BX와
개발자와 디자이너가 만들어가는 UI/UX 과정이 있습니다.

BI/BX

BI/BX란 Brand Identity, Brand eXperience를 뜻하며,
BI는 로고, 브랜드 컬러 등 기업의 정체성을 부여해주는 디자인과정입니다. 저희가 구글 하면 빨강,파랑,초록,노랑의 글씨가 써져있는 구글이 떠오르고, 초록색깔에 N글자가 박힌 로고를 보면 네이버가 생각이 나죠? 이러듯 특정 로고를 보고 바로 그 기업이 생각나게 만드는 과정이라고 보시면 될 것 같습니다.

BX는 브랜드의 가치, 의미를 사용자에게 긍정적인 경험을 만들어서 브랜드의 긍정적이고 좋은 이미지를 형성시킬 수 있도록 설계하는 과정이라고 이해하시면 되겠습니다.

UI/UX

UI/UX는 사용자 인터페이스와 사용자 경험을 의미합니다.
이 과정은 많이들 들어보셨을테니 설명은 PASS~

그럼 디자이너와 개발자는 어떻게 소통할까요?
당연한 이야기이지만 프로그램을 통해 소통을 진행합니다.
유명한 디자인 툴로서 피그마, 스케치, Adobe XD가 있겠습니다.

각각의 간단한 특징을 보자면
스케치는 디자인 툴로서 선두주자인 프로그램입니다.
하지만 MAC에서밖에 지원이 안되어 WINDOW에서는 사용하지 못한다는 치명적인 단점이… (전 못써요 ㅠㅠ)

Adobe XD라는 프로그램은 Adobe에서 출시한 제품인데 Adobe는 많이들 들어보셨나요?)
저희가 많이 아는 포토샵이 Adobe에서 나온것입니다. 그 외에도 유명한 프로그램으로 일러스트레이터, 동영상 편집툴인 Adobe Premium등이 있죠.
그 회사에서 디자인 툴로 만든 프로그램이 Adobe Xd입니다.

그리고 최근 가장 뜨거운 디자인툴이 피그마인데, 이전의 프로그램들은 사용을 하기 위해선 별도의 소프트웨어를 설치를 해야하는데 피그마는 웹 브라우저 기반의 툴이어서, 별도의 프로그램 설치 없이도 실행이 가능합니다. 또한 지난시간에 배웠듯이 에자일 방법론이 많이 사용되면서, 동시에 여러사람이 작업이 가능하다는 피그마의 장점이 있어 애자일 프로젝트에서 많이 선호됩니다.

개발

그럼 가장 중요한 개발 부분을 한번 봐볼까요?
일단 제가 개발한것은 웹 어플리케이션입니다.
프론트는 React를 사용해 개발되었고 백엔드는 Node Js 기반인 Express를 통해 개발이 되었습니다. 인프라는 AWS를 활용하여 구축했습니다.

프로젝트 구조

Front 구조 image

Backend구조 image

용어 설명

  • Route 53: AWS Dns System 서비스
  • DNS(Domain Name System): 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸어 변환
  • EC2(Elastic Compute Cloud): AWS cloud 서비스, 사용자가 가상 컴퓨터를 임대 받아 그 위에 자신만의 컴퓨터 애플리케이션들을 실행할 수 있게 해줌
  • Nginx: 웹서버 소프트웨어
  • Load Balancing: 컴퓨터 네트워크 기술의 일종으로 둘 혹은 셋이상의 중앙처리장치 혹은 저장장치와 같은 컴퓨터 자원들에게 작업을 나누는 것을 의미
  • Elastic Load Balancing: AWS의 로드 밸런서 서비스, EC2 인스턴스, 컨테이너, IP 주소 등 여러 대상에 걸쳐 수신되는 트래픽을 자동으로 분산
  • SSL: 웹사이트와 브라우저(혹은, 두 서버)사이에 전송된 데이터를 암호화하여 인터넷 연결을 보안을 유지하는 표준 기술
  • PM2: Node js 프로세스 관리 라이브러리
  • AWS RDS: AWS가 서비스하는 분산 관계형 데이터베이스
  • AWS S3: AWS가 서비스하는 온라인 스토리지 웹 서비스

테스트

사실 소프트웨어 공학시간에 별의 별 테스트를 다 배웠지만 실제로 응용한적은 없습니다.
제가 이전의 프로젝트 진행 시, 별도의 테스트기간을 가지기 보단 개발을 하면서 에러가 생기면 즉각 피드백하고 고치는 식으로 진행이 되었습니다.
이번 프로젝트 같은경우에는 피드백이 생기면 트렐로를 통해 진행이 되었습니다.

운영 & 유지

현재 서버는 EC2를 활용하여 잘 돌아가고 있습니다.
아웃소싱의 역할로 개발을 참여하다보니 그냥 서버 잘돌아가면 별 문제가 없는 단계입니다.
만약 서버에 이상이 생기거나, 서버의 크기를 확장시켜야 한다면 그런 작업정도는 진행이 될 수 있겠죠.

마무리

짜잔 이렇게 해서 하나의 프로젝트가 완성되는 과정을 보셨습니다.
제 세미나가 잘 도움이 되었을지는 모르겠네요.
도움이 잘 되어서 필요한 부분은 이번 솔챌을 진행하면서 적용해보셔도 좋을 것 같습니다.
행여 프로젝트를 진행하시다가 도움이 필요하시다면 언제든지 요청해주세요~
제가 아는 부분에 한해서 열심히 알려드리겠습니다.
또한 모르는 부분이 발생하면 같이 공부하면서 진행해봐요~
작년에도 고생많으셨고 올 한해도 화이팅입니다~!.