Category Archives: Dev.

AWS VPC 와 서브넷

AWS 의 VPC는 리전 내에 위치하고 서브넷은 AZ내에 위치한다.

한 VPC에 AZ에 대해 여러 서브넷을 둬서 고가용성(HA)를 확보할 수 있다.

서브넷의 통신 방법은 VPC의 라우팅 규칙(Route Tables)을 따른다.

라우팅 규칙은 아이피 대역(CIDR)에 따라 타깃을 설정할 수 있고, 서브넷에 붙이는(associate) 방식으로 서브넷의 통신 방법을 설정할 수 있다. 서브넷과 라우팅 규칙은 1:n 관계이다. 각 서브넷은 한개의 라우팅 규칙을 붙일 수 있고 한 라우팅 규칙은 여러 서브넷에 적용될 수 있다.

이 라우팅 규칙을 통해 VPC Peering이나 Public Subnet, Private Subnet의 설정을 할 수 있게 된다.

인터넷 게이트웨이(IGW) / Public Subnet / Private Subnet

IGW는 VPC와 인터넷을 이어주는 가상 게이트웨이이다.

라우팅 규칙을 통해 IGW에 연결된 서브넷은 Public Subnet, 그렇지 않은 서브넷은 Private Subnet이라 한다.

Private Subnet 내의 인스턴스들은 Public IP를 갖지 않고 인터넷에 직접 노출되어있지 않다. Private Subnet에서 인터넷에 아이피가 노출되지 않으면서 인터넷에 접속하려면 NAT를 사용해야 한다.

원격근무의 필수조건, AWS에 OpenVPN 구축기

근무중인 세븐핀테크는 설립 때부터 리모트 근무에 높은 가치를 두고 실천해오고 있다. 각 멤버는 인천 송도, 천안, 제주에서 근무하고 있다. 세븐핀테크는 주식 고수의 실시간 계좌를 열람하고 거래 알림을 받는 모바일 앱 월스트릿파이터를 개발, 운영하고 있다.

계좌까고 말해라 월스트릿파이터

집이나 도서관, 카페 등 본인이 편한 곳에서 근무하기 때문에 모든 사내 리소스는 물리적인 공간에 두지 않으며 클라우드(주로 AWS)에서 운영된다. 그러나 보안 면에서 아이피 주소 제한에 손이 많이가고 그에 따라 보안이 느슨해지는 이슈가 발생했다. 이슈의 해결을 위해 VPN 을 도입했다.

우리는 아래 사항에 중점을 두고 구축 작업을 진행했다.

  • AWS EC2에 OpenVPN을 사용해 구축
  • 사내 리소스에 접근할 때만 VPN을 통하기
  • Docker를 사용한 구축

AWS EC2

물리적인 사내 리소스가 있는 경우 VPN 구축작업은 사실 굉장히 쉽다. 최근에는 공유기나 NAS에 기본 기능으로 탑재되어 있는 경우도 많기 때문에 곧바로 사용할 수도 있다. 그러나 물리적인 이슈가 생겼을 때 사무실로 이동해야하는 불편함이 있을것이고 모든 리소스가 클라우드에 존재하는데 사무실을 거쳐 접근해야 한다면 성능에서도 불리할 것이다.

사내 리소스에 접근할 때만 VPN을 통하기

VPN클라이언트를 동작시켰을 때 모든 트래픽을 VPN을 통하게 한다면 AWS 데이터 트래픽 비용을 감당하기 어려울 것이다. 사내 리소스에 접근할 때만 VPN을 통하도록 Split Tunnel 방식으로 구축했다.

Docker OpenVPN

사내 리소스들은 대부분 Docker 기반으로 동작하고 있다. 사용률이 높지 않아 EC2 하나에 여러 컨테이너를 동작시키고 있다. OpenVPN도 Docker 로 잘 만들어진 이미지가 있다. 우리가 사용한 이미지는 kylemanna/docker-openvpn 이고 아래 주소들에서 확인할 수 있다.

이 이미지는 Config 파일 생성과 사용자 추가 삭제 등 관리에 필요한 커맨드들을 다수 제공하고 문서화가 잘 되어있는 장점이 있다.

설치법도 매우 간단해서 Medium 에는 5분만에 설치하는 글이 있을 정도다. (https://medium.com/@gurayy/set-up-a-vpn-server-with-docker-in-5-minutes-a66184882c45)

설치

아래 설치법은 프로젝트의 README 를 따라 거의 그대로 옮긴 것이다.

볼륨 만들기

아래 만들 설정파일과 인증서 파일들을 저장할 볼륨을 만든다.

OVPN_DATA="ovpn-data-test"

docker volume create --name $OVPN_DATA

ovpn_genconfig 를 사용해 기본값으로 서버만들기

docker run -v $OVPN_DATA:/etc/openvpn --log-driver=none --rm kylemanna/openvpn ovpn_genconfig -u udp://VPN.SERVERNAME.COM

루트인증서 생성

실행 중 발급기관 이름(CN)과 비밀번호를 물어본다. 비밀번호는 앞으로 사용자 추가 / 삭제에도 사용되므로 메모해둬야 한다.

docker run -v $OVPN_DATA:/etc/openvpn --log-driver=none --rm -it kylemanna/openvpn ovpn_initpki

init-pki complete; you may now create a CA or requests.
Your newly created PKI dir is: /etc/openvpn/pki

Generating a 2048 bit RSA private key
............................................................................+++
....+++
writing new private key to '/etc/openvpn/pki/private/ca.key.XX'
Enter PEM pass phrase:
Verifying - Enter PEM pass phrase:
...
Common Name (eg: your user, host, or server name) [Easy-RSA CA]:

CA creation complete and you may now import and sign cert requests.
Your new CA certificate file for publishing is at:
/etc/openvpn/pki/ca.crt

Generating DH parameters, 2048 bit long safe prime, generator 2
This is going to take a long time
... 

Enter pass phrase for /etc/openvpn/pki/private/ca.key:
Check that the request matches the signature
...
Enter pass phrase for /etc/openvpn/pki/private/ca.key:

An updated CRL has been created.
CRL file: /etc/openvpn/pki/crl.pem

클라이언트 개인용 인증서 만들기

CLIENTNAME 을 CN 으로 하는 10년짜리 인증서가 만들어진다.

docker run -v $OVPN_DATA:/etc/openvpn --log-driver=none --rm -it kylemanna/openvpn easyrsa build-client-full CLIENTNAME nopass

Generating a 2048 bit RSA private key
......................................+++++
.....................................................................................................+++++
writing new private key to '/etc/openvpn/pki/private/CLIENTNAME.key.XXXXOGlPiN'
-----
Using configuration from /usr/share/easy-rsa/openssl-easyrsa.cnf
Enter pass phrase for /etc/openvpn/pki/private/ca.key:
Check that the request matches the signature
Signature ok
The Subject's Distinguished Name is as follows
commonName            :ASN.1 12:'CLIENTNAME'
Certificate is to be certified until Nov 14 14:02:04 2028 GMT (3650 days)

Write out database with 1 new entries
Data Base Updated

참고 – 사용자 제거

# crt 파일과 key는 보존
docker run --rm openvpn ovpn_revokeclient CLIENTNAME
# crt 파일과 key도 함께 제거
docker run --rm openvpn ovpn_revokeclient CLIENTNAME remove 

사용자에게 배포할 클라이언트 Config 파일 만들기

이 파일에 개인용 인증서가 포함되어 있어 중앙에서 배포할 때 편리하다.

docker run -v $OVPN_DATA:/etc/openvpn --log-driver=none --rm kylemanna/openvpn ovpn_getclient CLIENTNAME > CLIENTNAME.ovpn

서버실행

AWS Security Group 에서 UDP 1194 포트를 열어야 함에 유의한다.

docker run -v $OVPN_DATA:/etc/openvpn -d -p 1194:1194/udp --cap-add=NET_ADMIN kylemanna/openvpn

테스트

VPN 클라이언트를 사용해 클라이언트 Config 파일 설치 후, VPN 접속해본다.

VPN 접속 전후로 외부 아이피 주소가 달라지면 성공이다.

나는 주로 ifconfig.co 라는 서비스에서 외부 아이피 주소를 활용한다.

$ curl ifconig.co
0.0.0.0

설정 팁

구축을 위해 사용한 몇가지 설정을 소개한다. 이 설정들은 컨테이너 볼륨의 /etc/openvpn/openvpn.conf 수정내역에 대한 것이고, 이미지에는 vi가 설치되어있어 config 파일에 접근이 가능하다는 점을 알아두고 시작하면 좋다.

docker run -v $OVPN_DATA:/etc/openvpn --rm -it kylemanna/openvpn vi /etc/openvpn/openvpn.conf

Split Tunnel 사용

OpenVPN 에서 Split Tunnel은 특정 아이피 대역을 VPN Gateway 를 통하도록 한다. 설치때 사용한 ovpn_genconfig 은 기본값으로 클라이언트의 모든 트래픽이 VPN 네트워크를 통하게 한다. 따라서 이를 변경해줘야 한다. AWS 내의 내부 자원이므로 아이피 대역은 VPC의 아이피 대역을 적어준다.

# push "redirect-gateway def1" # => 모든 트래픽이 VPN 을 통하는 설정, 주석처리 / 삭제
push "route 10.20.0.0 255.255.0.0 vpn_gateway" # VPC 대역에 접근할 때만 VPN 을 통하도록 클라이언트 접속 설정에 PUSH

다중 클라이언트 접속

한 클라이언트 CN으로 동시에 접속가능하게 하려면 duplicate-cn 을 사용한다. 모바일과 PC에서 동시에 접속하려면 필요할 것이다.

duplicate-cn

Route53의 Private DNS 설정

액세스 편의를 위해 내부 자원에 Private DNS 를 사용할 수 있다. Route53를 이용한 Private DNS는 VPC 대역 +2에 위치한다. 예를 들어 10.20.0.0, 255.255.0.0 이라면, 10.20.0.2 에 DNS 서버가 위치한다. DNS 설정은 push dhcp-option DNS 를 사용한다.

push "dhcp-option DNS 10.20.0.2" 

맺음말

VPN을 구축하면서 자체 보안 뿐 아니라 다른 회사와의 협업 부분에서도 개선된 면이 있다. 앱 특성상 제도권 금융회사들과 협업하는 경우가 있다. 이들 회사는 높은 수준의 보안을 요구하고 이에 따라 협업시 고정 아이피 주소를 교환하는 작업이 자주 일어난다. 서버 측이야 문제될 것이 없지만 클라이언트는 사정이 좀 다르다. 개발자의 장소에 구애받을 뿐 아니라 휴대폰 망을 사용하는지, 와이파이를 사용하는지에 따라서도 제한을 받게 된다. 최근 클라이언트 개발에 있어서도 협업할 부분이 있었는데 아직 출시 전인 기능을 함께 테스트하기 위해 모바일 클라이언트가 금융회사 내부 자원에 접근해야 할일을 VPN을 통해 간단히 처리할 수 있었다.

들이는 품에 비해 만족도가 매우 높은 작업이었다. 사내보안 때문에 Security Group 수정이 잦거나, 관리가 안되는 징조가 보이는 상황이라면 도입을 시도해 보는 것을 추천한다.

참고

sami-parser 와 개발자의 매너

한국에서는 자막으로 주로 SMI 파일을 사용한다. 이 포맷은 MS 가 만들었고 한국에서는 자주 쓰이지만 전세계적으로 봤을 때는 많이 쓰이지 않는다. 대신 SRT 파일이 많이 사용된다. 그래서 외산 플레이어들이나 디바이스들은 잘 지원하지 않는다. 윈도우 계열에서 손을 뗀지가 벌써 10여년이라, 영상을 즐길 때 SMI 파일들은 항상 스트레스였다.

그래서 만든 프로젝트가 Sami-paser 였다. 일단, SMI 파일들을 제대로 파싱할 수 있다면, 그 다음의 변환 등은 쉽게 할 수 있기 때문에 후에 필요하면 스스로 변환기를 만들거나 누군가는 만들어낼 수 있기 때문이다. 사실 변환기를 제작하다 호구지책이 앞서고 언제나 새로운 것에 먼저 눈을 돌리는 MBTI 발명가형이다보니 진득하게 큰 그림을 완성하지 못했다. 이후 미드 볼 시간이 없기도 했고.

오랜만에 또 그 오래된 스트레스를 받았다. SMI 파일은 가지고 있는데 SRT 파일로의 변환이 필요한 상황. 새로 등장한 프로젝트를 살펴보다 평범한 주말 저녁의 기분이 망가졌다.

sami.js 라는 프로젝트의 개발자가 내 프로젝트의 코드가 “쓸데 없는 것이 많다”며 “한시간만에 잘 뽑”힌 프로젝트를 제작했다. [원글]

내 기억에 sami-parser 는 꽤 공을 들여 만들었다. 처음으로 NPM 에 공개한 프로젝트 이기도 하고, 인터넷에 도는 SMI 파일들의 문법들이 비정상인 경우가 너무 많다. 한마디로 개판이다. 이 문제를 해결하려고 모 자료실에서 100개 넘는 파일을 다운받아 테스트케이스로 만들어 돌리고 코드와 테스트 케이스에 반영했다. 물론 수집하고 돌려보는데도 1시간 이상이 든다. 그런데 한시간만에 만들어 냈다니.

그래서 코드를 보니 베껴졌다는 인상이 강하다.

Sami-parser 의 정규식Screen Shot 2016-06-05 at 5.16.48 AMsami.js 의 정규식Screen Shot 2016-06-05 at 5.17.22 AM Sami-parser 의 Sync 태그별 분류Screen Shot 2016-06-05 at 5.18.04 AMsami.js 의 Sync 태그별 분류Screen Shot 2016-06-05 at 5.18.29 AM

그리고 한시간 만에 만들 실력자라기엔 기본적인 코드리뷰에 잡힐 것이 많이 보인다. while 내에 var 라던지.

사실 한가지 언어로 제작된 정상적인 자막만 입력받을 것 이라면, 에러처리와 다중언어 지원은 부차적인 일일 수 있다. 하지만 말 그대로 파서는, Syntax Tree 를 만들고, 정상적으로 파싱되지 않을 때 그 이유를 정확히 알려줘야 하기 때문에 자막 제작기가 자주 실수하는 에러에 대한 에러코드나, SAMI 포맷이 지원하는 다국어를 지원하고자 노력했다. 하지만 이 부분이 “쓸 데 없는 코드”로 폄하되었다.

처음 만든 프로젝트라 과욕이 있었고, 그래서 2년이나 지금 다시 본 프로젝트는 Debug Mode 정도가 있으면 코드가 훨씬 더 간결했을 것이라는 생각이 든다. 그래서 쓸데 없는 코드라는 말은 받아들일 수 있다.

그러나 프로젝트에 대한 피드백은 프로젝트 홈에서 해야한다. 코드 베껴 놓고 나는 한시간 만에 만들었다(만들었다?)고 자랑하는 것 외에 다른 인상을 나는 받지 못했다. 정확한 내 감정은 비웃음 당했다 생각한다.

가끔 왜 그렇게 만들었는지 이해 없이 “복잡하게 만들어서” “기능이 없어서” “그 코드는 안돼서” 새로 만들어 제끼는 사람이 있다. 심지어 유명 오픈 소스 프로젝트에다 대고도 “복잡한 그걸 왜 도입하느냐” 는 식이다.

그런 사람들은 기존 만들어진 프로젝트를 다시만들 때는 정치를, 유명 프로젝트 도입에 대고는 난 공부안합니다라는 자랑을 서슴지 않는다.

이 글은 원 글에 트랙백이 걸릴 것이다.

슬쩍 떠보는 npm 과 package.json

GruntJS 와 같이 Node.js 로 만들어진 유틸리티들은 npm 을 통해 설치하고 사용하는 것이 쉽고 편리하다. 하지만 Node.js 를 깊이 공부해보려는 목적이 아니라면 굳이 npm 에 대해 깊이 알 필요는 없다. 그런 사람들과 입문자들을 위해 npm 을 통한 패키지의 설치/제거방법과 package.json 에 대해 간단히 알아보려고 한다.

npm 는 Node Package Manager 의 약자이다. 보통 npm 은 두가지 의미로 사용된다. 첫번째는 오픈소스로 작성된 Node.js 모듈들이 등록된 저장소인 http://npmjs.com 를 의미한다. 두번째는 패키지를 인스톨하고 의존성을 관리하는 자바스크립트로 작성된 커맨드라인 유틸리티이다. 커맨드라인 유틸리티는 npmjs.com 의 저장소로 부터 패키지를 찾고 설치하는 등의 기능을 사용할 수 있다. 이 글에서 npm 은 주로 커맨드라인 유틸리티의 의미로 사용하고, 첫번째 의미의 npm 은 npm 저장소라고 부를 것이다.

패키지 관리가 필요한 이유

일반적으로 Node.js 의 프로젝트는 의존하는 다른 패키지의 소스코드를 포함하지 않는다. 대신 의존하는 패키지들을 package.json 에 명시하고 개발자들은 npm 을 사용해 각자 설치해 사용한다. 특히 패키지들 중에는 C 코드를 컴파일해야 하는 것들도 있다. 이 때 컴파일된 결과물은 OS 나 시스템에 의존적이기 때문에 패키지에 포함되지 않는다. 따라서 다른 패키지의 소스코드를 포함하지 않는 것이 원칙이고 패키지 설치와 제거를 위해 npm 기본사용법을 알아야 한다.

패키지 설치와 제거

패키지 설치

npm install <패키지이름|패키지외부URL>

패키지 설치를 위해서는 install 명령을 사용한다. npm 저장소에 위치한 패키지들은 패키지이름을 적으면 설치된다. npm 패키지 외에 git 저장소나 외부 URL 에 위치한 패키지들도 설치도 가능하다. 외부 패키지 설치와 관련한 내용은 공식문서의 Install Package공식문서의 Specifics of npm’s package.json handling에 정리되어 있다.

지역패키지, 전역패키지 지정 옵션

npm 패키지는 설치되는 위치에 따라 지역패키지와 전역패키지로 나눌 수 있다.

전역(global)패키지는 시스템 전체에서 사용할 수 있도록 설치되는 패키지이다. 특히 명령어를 사용해야하는 경우에 많이 사용한다. 예를들어 grunt-cli 패키지는 grunt 명령을 포함하는데, 이 명령은 시스템 어디에서든 실행될 수 있어야 하므로 전역 패키지로 분류할 수 있다. 전역패키지로 설치하기 위해서는 전역을 의미하는 --global(또는 -g) 옵션을 사용한다.

npm install <패키지이름|패키지외부URL> --global

지역(local)패키지는 현재 프로젝트에만 한정해 사용하는 패키지를 말한다. 이 패키지들은 프로젝트 루트 디렉토리(package.json 이 있는 디렉토리)의 바로 아래에 node_modules 디렉토리에 설치된다. package.json 을 찾을 수 없으면 현재 디렉토리에 바로 아래에 node_modules 디렉토리를 만들고 여기에 패키지를 설치한다. --global 옵션을 명시하지 않은 경우 지역패키지로 설치된다.

의존성 명시 옵션

package.json 에는 프로젝트가 의존하고 있는 다른 프로젝트를 명시할 수 있다. 특히 유닛테스트용 패키지나 grunt 태스크 플러그인처럼 프로젝트를 개발하거나 테스트할 때만 필요한 패키지들만 따로 명시해 설치할 수도 있다.

--save : 패키지를 설치하고 package.jsondependencies 항목에 설치한 패키지의 이름과 버전을 명시한다.

--save-dev : 패키지를 설치하고 package.jsondevDependencies 항목에 설치한 패키지의 이름과 버전을 명시한다.

npm install <패키지이름|패키지외부URL> [--save-dev|--save]

의존성 전체 설치

npm install [--production]

package.jsondependenciesdevDependencies 에 명시된 의존성 패키지들은 다른 옵션없이 npm install 명령으로 설치할 수 있다.

프로젝트를 개발/테스트하려는 것이 아니라 활용만 하려는 목적이라면 개발의존성을 설치하는 것이 불필요하므로 devDependencies 의 패키지를 제외하고 설치할 수도 있다. 이 때는 --production 옵션을 사용한다.

패키지 제거

npm uninstall <패키지이름> [--save-dev|--save|--global]

패키지를 제거하는 명령은 npm uninstall 이다. npm install 과 마찬가지로 --global --save-dev --save 옵션을 사용할 수 있다.

주의할 점은 --save--save-dev 옵션을 사용해 의존성을 명시한 패키지들은 제거할 때도 --save--save-dev 를 사용해야 package.json 의 의존성 항목을 제거한다.

마찬가지로 전역패키지에서 찾아 제거하려면 --global 를 명시해야한다.

짧은 이름 사용하기

npm 은 명령어 중엔 별명을 사용할 수 있는 명령들이 있다. 예를 들어 npm installnpm i 로 줄여 쓸 수 있다. 그리고 npm uninstallnpm unpm rm, npm r 으로 줄여 사용할 수 있다.

package.json 생성

npm init [--yes]

package.json 은 정해진 규칙이 있는 JSON 형식의 파일이다. 하지만 세부 내용들을 모두 외워 생성하는 것은 어렵다. 이 때 npm init 명령을 통해 package.json 을 쉽게 생성할 수 있다.

npm init 은 대화형 인터페이스로 package.json 을 생성하도록 도와준다. 이 때 모든 값을 기본값으로 채우고 싶다면 -yes(또는 -y) 옵션을 사용할 수 있다. pacakge.json 의 일반적인 항목을 자동으로 채워 생성한다.

package.json 의 주요항목

package.json 은 npm 이 사용하는 설정 파일이다. 패키지의 이름 및 의존성 등이 이 파일에 명시된다. 이 파일의 주요항목을 살펴보자.

name 프로젝트의 이름이다. 기본값은 프로젝트의 디렉토리 이름이다.

version 프로젝트의 버전이다. Node.js 패키지의 버전은 유의적 버전(Semver: Semantic Versioning) 의 체계를 사용한다. 이 체계는 버전번호를 주버전(主, Major), 부버전(部, Minor), 수버전(修, Patch) 로 구분해 3개의 점(dot) 으로 표현한다. 즉, 2.1.3 버전이 있다고 한다면, 주버전은 2, 부버전은 1, 수버전은 3이다. nameversion 항목은 package.json 에서 가장 중요한 정보이다. 이 두가지 정보를 결합해 패키지의 식별자로 사용한다. 따라서 패키지의 내용이 변경되면 꼭 version 항목을 변경해야한다. 참고로 npm version [major|minor|patch] 명령을 사용하면 자동으로 package.json 의 version 항목을 변경하고 Git 저장소에 버전이름(v2.1.3 형식)으로 태그를 달 수 있다.

(참고: 유의적 버전에 대해서는 http://semver.org/lang/ko/ 를 참고하자.)

description 프로젝트의 구체적인 설명이다.

main 이 패키지의 엔트리포인트가 되는 자바스크립트 파일경로를 명시한다. 만약 패키지의 이름이 foo 라면 다른 패키지에서는 require('foo') 문으로 이 패키지를 로드한다. 이 때 main 에 지정된 파일을 로드하게 된다.

scripts 패키지에서 반복적으로 사용할 주요명령들을 지정해 사용할 수 있다. 기본값으로 생성된 test 를 실행하기 위해서는 npm test 으로 실행할 수 있다.

keywords 이 패키지를 설명하는 키워드들이다. 이렇게 지정된 키워드들은 npm search 명령으로 패키지를 검색할 때 검색어로 사용된다.

license 패키지의 라이선스 정책을 명시한다. 기본값은 ISC 이다. 참고로 ISC 는 INTERNET SYSTEMS CONSORTIUM 의 약자로 이 단체에서 제정한 공개 소프트웨어 라이선스이다.

author, contributors 객체형식 또는 문자열 형식으로 개발자의 이름과 이메일을 명시한다. author 는 원 저작자이기 때문에 문자열형식이나 객체형식으로 한명만 지정하고, contributors 는 여러 사람이 될 수 있으므로 배열 형식으로 지정한다. 사람을 표현할 때는 아래와 같이 이름, 이메일, URL을 명시할 수 있고, 이메일과 URL은 선택사항이다.

객체 형식으로 지정한 예

{ "name" : "Constantine Kim"
, "email" : "[email protected]"
, "url" : "http://elegantcoder.com/"
}

문자열로 표현한 예

"Constantine Kim <[email protected]> (http://elegantcoder.com/)"

dependencies, devDependencies 이 패키지가 다른 패키지에 의존할 경우 의존성에 대한 항목이다. foo 라는 프로젝트의 2.x 버전에 의존적이라면 아래와 같이 명시한다.

{
  "dependencies" :
    "foo" : "2.x"
  }
}

이렇게 이름과 버전을 명시한 패키지들은 npm 저장소로부터 설치된다. 앞서 패키지 설치 장에서 봤듯 npm 저장소 외에도 git 저장소나 외부 URL 의 패키지도 명시할 수 있다.

dependencies 는 이 패키지에 의존하는 다른 프로젝트에서 구동시키기 위한 의존성이다. 즉, 이 패키지를 활용할 때 필요한 의존성을 명시한다. npm install --save 명령을 통해 패키지를 설치하면 이 항목에 프로젝트 정보가 저장된다.

devDependencies 에는 이 패키지를 테스트하거나 개발할 때 필요한 패키지들을 명시한다. npm install --save-dev 명령을 통해 패키지를 설치하면 이 항목에 프로젝트 정보가 저장된다.

Google Spreadsheet 로 쉽고 빠른 Backoffice 구축

Google IO Extended Seoul 에 다녀왔다. 나는 C 홀에 있었는데 라이트닝 토크 세션이 있고 그 자리에서 발표신청을 해도 된다길래 즉석해서 “스타트업 개발자의 수고를 줄여주는 GoogleSpreadsheet” 라는 주제로 자료를 만들어 발표했다.

5분은 짧은 시간이었지만 개괄적으로 이야기하기에는 충분한 시간이었다. 세션 후에 적극적으로 질문 해주시는 분들을 보고 나에게만 고민스러웠던 주제가 아니구나 하는 생각을 하게 됐다. 발표자료를 공유하고 더 자세한 내용을 블로그 포스트로 적어봤다.

덧) 오프라인 세미나를 준비하고 있다. 구글 설문지 를 통해 의향을 알려주셨으면 한다.

앱이나 웹을 개발할 때 서비스를 구성하는 컨텐츠를 제작해야 한다. 컨텐츠는 맛집서비스라면 맛집데이터 일 수 있고, “이메일 형식으로 입력해 주세요” 같은 문구일 수도 있다. 프로젝트에서 컨텐츠 제작에는 대부분 기획자나 큐레이터 등 별도의 롤을 둔다. 그리고 개발자는 그 컨텐츠를 소프트웨어에 맞게 옮긴다. 그런데 이렇게 옮기는 작업에도 시간이 든다. 한글로 된 컨텐츠라면 맞춤법이 틀린 부분을 발견하고 피드백하는데도 시간이 든다.

그래서 스타트업 개발자는 언제나 시간이 부족하다. 그렇다고 컨텐츠 담당자에게 “데이터를 JSON으로 만들어주세요.” 라고 요청할 수는 없는 것 아닌가. 그래서 지금도 수많은 개발자들이 텍스트데이터를 복사와 붙여넣기 기능으로 JSON 으로, 하드코딩으로 소프트웨어를 만들고 있다.

누구나 이 쯤에서 백오피스로 만들어 처리하면 좋겠다고 생각할 것이다. 하지만 스타트업 개발자에게 그럴만한 여유가 없다. 한시가 바쁜데 서비스와 서비스의 컨텐츠를 구성하는 도구까지 만들어야하는 것이다. 그리고 백오피스를 구축하려면 사내에서만 접속하도록 보안관련 사항을 구축하고 사내에 활용교육도 해야한다. 그리고 구축 후 뭔가 변경되면 그 때마다 교육이 필요하다. 쉽지 않은 일이다.

따라서 개발자는 백오피스를 만드는 데에 보수적이어야 한다. 도구를 갖는 것에 반대해야 한다는 것이 아니다. 빠르게 변하는 스타트업의 비즈니스를 담을 수 있는 은탄환같은 백오피스를 만들기에는 시간이 많이 들기 때문에 쉽게 접근해서는 안된다는 것이다.

그렇다고 도구를 갖지 않을 수는 없으니 백오피스는 스스로 구축하기 보단 있는 것을 조합해 사용하자. 그래서 나는 구글 스프레드시트로 백오피스를 대신하는 것을 추천한다.

왜 구글 스프레드시트인가?

구글스프레드시트는 모두의 도구다. 특히 IT 에 밝지 않은 사람이 새로운 도구를 익히는데 방어적인 경우가 많은데 그렇다하더라도 엑셀을 다루지 못하는 사람은 드물다. 여기에는 컨텐츠 담당자들에게 손에 익숙한 도구를 쥐어주고 협업을 강화하는데 의미가 있다. 컨텐츠 작성을 컨텐츠 담당자에게 온전히 돌려주고, 개발자가 소프트웨어로 옮기는 작업을 최소화할 수 있다.

구글 스프레드 시트는 강력하다. 기본적으로 엑셀과 비슷한 함수셋을 가지고 있기 때문에 컨텐츠 개발자에게는 반복되는 일을 줄여줄 것이다. 또 필요한 함수가 있다면 개발자가 직접 자바스크립트로 직접 작성해 기능을 추가할 수도 있다. 또 공개된 API 를 사용해 스프레드시트의 내용을 JSON/XML 포맷으로 쉽게 변환해 다운로드 받을 수 있다.

다시말해 구글 스프레드시트는 비 개발자들에게는 손쉬운 도구이면서 개발자에게는 강력한 도구가 된다.

구글 스프레드시트로 백오피스를 대체하는 방법

먼저 백오피스에서 입력할만한 데이터의 특성은 읽기에는 열려있고 쓰기에는 닫겨있다. 즉, 입력을 하는 사람은 한정적이다. 하지만 데이터 자체는 어떤 방법으로든 모든 사람에게 공개될 것이다. 예를들면 웹사이트의 “언론보도” 에 들어가는 데이터 정도를 들 수 있다.

데이터 입력은 구글 설문지에서

데이터 입력은 어느정도 정규화되어야 한다. 따라서 구글 설문지를 활용하자. 입력값 검증(validation) 도 어느정도 가능하다. 데이터를 입력하는 사람이 한정적이라는 것은 상대적으로 검증에 여유롭다는 말도 되므로 적은 검증으로도 활용할 수 있다.

데이터 수정/삭제는 스프레드시트에서 직접수행

설문양식으로 입력받은 데이터는 스프레드시트에 곧바로 들어간다. 따라서 이 시트에서 직접 수정하고 삭제할 수 있다.

개발자의 스프레드시트 활용

필요한 함수가 있다면 직접 작성

Google Apps Script 를 통해 스프레드시트에 들어갈 함수를 직접작성할 수 있다.

예를들어 아래 코드는 내가 만든 전각-반각 변환 자바스크립트 함수다. 회사가 중국어를 다루다보니 필요해서 만들게 되었다.

아스키 문자를 입력하더라도 중국어나 일본어 키보드로 입력하면 I'm full width 처럼 입력된다. 이 때 이 글자들이 바로 전각문자다. 자바스크립트를 사용해 구글 스프레드시트의 함수를 작성하고, 스프레드시트 내에서 이 함수를 호출해 반각문자로 손쉽게 변경할 수 있다.

참고로 전각문자들은 아스키코드와 동일한 순서로 코드가 배열되어 있어 그대로 변환만 하면된다. 다만 영어/한국어로 타이핑 할 때 마침표(.)를 타이핑하면 중국어/일본어에서는 。 로 표시가 되는데, 이것은 아스키코드 순서로 변환할 수 없어 이에 대해서만 별도의 처리를 해주었다. 전각 코드표는 여기에서 볼 수 있다. https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms

function ch_fw2hw(string) {
  var re = /([\uFF01-\uFF5E])/g;
  var unicodeStarting = "\uFF01".charCodeAt();
  var asciiStarting = "!".charCodeAt();
  string = string.replace(re, function (match, p1, offset, string) {
      var asciiCharCode = asciiStarting + (p1.charCodeAt() - unicodeStarting);
      return String.fromCharCode(asciiCharCode);
  }); 
  string = string.replace(/。/g, '.');
  return string;
}   

이렇게 작성한 코드는 스프레드 시트에서 곧바로 사용할 수 있다.

Screen Shot 2015-07-13 at 2.37.55 AM

외부서비스로부터 데이터가져오기, 데이터 내보내기 가능

그리고 URL 로부터 데이터를 받아온다던지 네트워크를 지원하므로 외부 서비스와의 연동도 가능하다. 예를들면 Facebook API 와 연동해 좋아요 횟수를 카운트 할 수도 있다.

Screen Shot 2015-07-13 at 2.38.58 AM

여러가지 방법으로 스프레드시트 API 에 접근해 내용을 JSON 으로 받아올 수 있다. API 에 접근하는 라이브러리를 사용해 직접 만들 수도 있고, 외부에서 Apps Script 를 실행해 읽어올 수도 있다.

아래 그림은 내부 프로젝트로 진행했던 translator 의 실행화면이다. 시트의 내용을 그대로 JSON 으로 받아오고 있다.

Screen Shot 2015-07-13 at 2.43.13 AM

보안문제는 어떤가?

발표 후에 가장 많이 들은 질문이다. 보안이라면 시트자체의 보안과 스크립트 실행권한의 2가지 측면에서 살펴볼 수 있을 것이다.

기본적으로 시트의 공유설정을 통해 받은 사람 외에는 다른 사람은 쓰거나 볼 수 없게 설정이 가능하다. 그리고 그림과 같이 Apps Script 실행권한을 제한할 수 있다. Apps Script 실행권한은 App 이 시트에 접근할 때 어떤 사용자를 대신해 접근하는지와 어떤 권한으로 Apps Script 을 실행할지로 나눠 생각할 수 있다.

Screen Shot 2015-07-13 at 1.53.00 AM

다만 Apps Script 에서 접근을 제한하는 경우에는 로그인이 필요하기 때문에 커맨드라인 인터페이스를 통해 Google OAuth 로그인하는 프로그램을 짜야하고 이것은 난이도가 다소 높다.

다시 말하지만 스타트업의 쉴새없이 변하는 비즈니스를 담을 수 있는 백오피스는 없다. 대신 도구를 조합해 최고의 퍼포먼스를 발휘하는데에 집중하자. 사실 나는 이 전에 그런 백오피스를 만들고자 했고, 관리에 실패한 후 이것을 깨달았음을 고백한다.

글을 쓰고보니 코드 한 줄 없이 개발자에게 공부할거리만 지운것은 아닌가 싶다. Apps Script 사용법을 알려드리고 직접 작성해보는 오프라인 세미나를 갖는 것이 좋겠다는 생각이 들었는데 혹시 참석 의향이 있다면 아래 구글 설문지로 의견을 주시기 바란다. 대략 2~3시간 정도면 Apps Script 의 기본 사용법을 라이브코딩으로 배울 수 있을 것이라 생각한다.