프로그래밍 초보가 알아야 할 웹 서비스 구현 무료 툴 39가지(출처: 노마드 코더 유투브)

 

 

자료 출처 : https://www.youtube.com/watch?v=u3Ph_M2bySg&t=299s

(노마드 코더 유튜브)

 

자바 - 안드로이드 네이티브를 공부하다가 문뜩 웹서비스 제작에 대한 관심이 생겨 위의 "노마드 코더" 유투브 채널을 구독하고 보던 중에 혹시 나와 같은 초보 중에 이 유투버를 모르거나, 또는 웹 서비스 구현에 사용되는 무료 툴을 모르는 사람이 있을 것 같아 아래에 관련 정보 및 링크를 공유한다.

( 나 또한 기억하고 정리하기 위한 목적이다.)

아래의 사항들은 위의 유튜버가 공유한 사항이며, 나도 배우는 사람으로써 공유하고자 하며 명확히 출처를 밝힌다. 많은 도움이 되길 바란다!

 

//제작과정

1. 기획

http://trello.com/

https://www.notion.so/ .

: 아이디어 정리, 체크 리스트 정리, 링크 붙여넣기, 협업 툴, 각자에게 역할주기, 기획 및 정리

 

2. 디자인

https://www.figma.com/ .

:(나는 이미 사용중) 스케치, 일러스트레이트와 같은 툴로, 온라인 오프라인(다운로드) 사용이 가능

웹 어셈블리로 만들어진 툴로, UI를 빠르게 디자인 해볼 수 있고, 프로토타입을 빠르게 작성해볼 수 있음

(뭔말이냐면, 화면을 만들고, 버튼 등을 만들고, 버튼을 눌렀을 때 "어떻게 이동한다", "어떤 화면이 나온다".. 요런 것을 쉽게 구현함- 당연히 코딩은 해야하는 것이고 그런 구동 기획을 세우기에 편리함)

제작하고 다운로드, CSS, 안드로이드, IOS로 내보내기도 가능, 리얼타임으로 협업가능

 

3. 사진

https://unsplash.com .

:고퀄, 무료

 

4. 코드 에디터

https://code.visualstudio.com/

:Visual Studio도 쓰지만, 나는 Atom 쓰고 있음(근데 잡 오류가 좀 보임)

 

5. CSS 라이브러리

https://tailwindcss.com https://bulma.io .

노마드코더 형은 쓰지 말랬지만 아래의 2가지도 보편적이다.

: Bootstrap4(템플릿 무료-유료 제공), Foundation

 

6. 깃 저장소

https://github.com/

https://about.gitlab.com/

https://bitbucket.org/product .

: 코드 업데이트하여 버전 관리

혼자 관리할 것이면 github 그리고 팀과 협업한다면 BitBucket 또는 GitLab

 

7. 클라이언트

https://insomnia.rest (REST)

https://altair.sirmuel.design (GraphQL) .

API를 만들어야 할때, 엔드 포인트 테스트할 수 있는 클라이언트 

 

//기능구현

1. 검색엔진

https://www.algolia.com .

: 검색엔진 기능을 추가해준다. 

 

2. 유저 비밀번호 관리

https://auth0.com/

https://aws.amazon.com/ko/cognito/ .

: 로그인, 로그아웃, 소셜네트워크와의 연동

- 차이점은 aws는 아마존 것이므로 아마존 작업을 한다면 추천

 

3. 이메일

https://www.mailgun.com/

https://mailchimp.com .

:mailgun - 트랜잭션 이메일 : 트리거, 이벤트 이 후 발송되는 이메일, 한달에 1만통 무료

(예를 들면, 웹사이트에 회원가입 등을 할때, 자동으로 '이메일 인증' 관련 이메일을 보내는 것 등)

:mailchimp - 마케팅용 이메일 서비스: 뉴스레터 발송(무료/유료 플랜있음)

4. SSL Certificate

https://letsencrypt.org/ .

: 웹사이트 보안 용, HTTPS에 필요. 웹사이트에 HTTPS를 달고 싶다면 사용

5. 백엔드

https://www.heroku.com/

https://aws.amazon.com/ .

: 백엔드 끝나고 올리는 곳, 5분안에 디플로이 가능 (heroku)

:aws의 경우, 가입하면 1년간 무료

 

6. 프론트엔드

https://pages.github.com/

https://www.netlify.com/ .

: 프론트엔드 디플로이용, 무료이며 빠르고 특히 static 처리시에 그러함

7. 서버리스

https://aws.amazon.com/lambda/

https://cloud.google.com/functions/ .

: 아마존 람다 : 한달에 1M free request per month:구글 클라우드 

8. 데이터베이스,

https://aws.amazon.com/dynamodb/

https://cloud.google.com/firestore/

https://www.mongodb.com/cloud/atlas

https://fauna.com/ .

:아마존 - 25기가 스토리지 무료제공

:구글 - 1기가 제공

 

9. 파일 업로드

https://cloud.google.com/storage/

https://cloudinary.com/ .

사용자가 사진이나 기타 자료를 업로드 할때!

: 구글 - 5기가 무료

:coudinary - 사진 저장에 최적화, 사진 용량 압축, 편집, 자르기 등등 기능을 제공

10. 에러 리포팅

https://sentry.io .

: 웹사이트에 에러가 발생하면, 누구에게, 언제, 어떤 에러가 발생했는지 이메일로 보내줌

- 누가 사용하여, 무엇이 잘못되었는지 알 수 있고, 에러를 고칠 수 있게 도와줌

11. 채팅

https://pusher.com

: 직접 코딩할 필요없이, 채팅 기능을 웹사이트에 쉽게 만들 수 있음. 리얼타임 걱정안해도 됨. 무료 플랜이 매력적

이건 진짜 꼭 해봐야겠다. 이정도면 단계적인 성장에 사용 가능할 것 같다.

푸셔 Price Plan

12. 푸쉬알림

https://onesignal.com/ .

: 알림 기능( 웹, 모바일 푸쉬)

13. 피드

https://getstream.io/

: 인스타 피드나, 누가 누구를 팔로잉 하고, 댓글을 남겼고 하는 등의 기능 구현

14. 분석

https://analytics.google.com/

https://www.hotjar.com

https://mixpanel.com/

: 구글이 킹왕짱

:hotjar은 유저가 어떻게 웹사이트를 쓰는지 볼 수 있음

:mixpanel 을 활용하면 유저의 aictivity를 잘 볼 수 있다.

 

15. 시간관리 https://wakatime.com/

: VSC 익스텐션중의 하나로,  얼마나 많은 시간을 어떤 코딩 업무에 많이 썼는지 그래프로 보여줌

 

이정도면 돈한푼 안드리고, 한번 해볼 수 있을 것 같다.

물론, 도메인 구매료는 내야겠지 1년에 35불인가.. 

그정도는 우리의 재미/취미를 위해서라면 쓸만한 금액이지 않을까?

그럼 다들 성공하시고, 굿잡!