웹 서비스 구현에 유용한 무료 제작툴 모음

온라인 웹 서비스를 만드는데 있어서 필요한 것들이 무진장 많다.

• 아이디어 모음
• 화면 디자인 
• 배경 등 첨부 이미지 
• 앱 푸쉬
• 리얼타임 채팅
• 검색엔진
• 등등

이걸 모두 기능 구현 할 필요 없이 돈 한푼 안들이고 서비스를 이용하여 구현할 수 있다.

 

1. Plan

- trello
- notion

아이디어 정리, 체크 리스트 정리, 링크 붙여넣기, 협업 등등

 

2. 디자인, Design

- figma

UI 를 빠르게 디자인할 수 있고, 다운로드, CSS, Android, iOS로 export가 가능하다.
실시간으로 다른 사람과 협업할 수 있는 기능도 있다.
디자인 계의 Google Docs.

- https://component.gallery/ : 디자인 시스템 사례들 참고

- https://blog.prototypr.io/50-design-systems-examples-to-learn-from-for-your-next-project-b9949e486702 : 50개 디자인 시스템 목록. 내 다음 사이드 프로젝트를 위해.

 

3. 사진, Image

- unsplash: https://unsplash.com/

고해상도의 아름다운 무료 사진을 얻을 수 있다.
고퀄리티 사진들이 모여있다.

 

4. 코딩, Coding

- Visual Studio Code

커스터마이징, 폭넓은 extension, 좋은 커뮤니티, 
더 할 말이 필요한지.

 

5. CSS

모두가 똑같은 웹사이트로 보이게 만드는 bootstrap, foundation 보다는

- Tailwind CSS
- Bulma CSS

 

6. Code Repository

- 혼자 일한다면: GitHub
- 협업해서 일한다면 BitBucket, GitLab

아마 다들 GitHub을 선호하겠지만 무료를 기준으로 협업하는 거면 GitLab이 짱짱이긴 하니 그러려니 하자.

 

7. API, GraphQL 테스트 툴

- REST: insomnia rest
- GraphQL: altair

 

----- 아래부터는 기능 구현

 

8. 검색 엔진

- Algolia: 검색엔진 서비스

 

9. User Auth 인증 구현

- Auth0: 로그인, 로그아웃 기능을 쉽게 제공, 소셜 로그인과 연동하기도 쉽다.
- AWS Cognito

귀찮은 유저 로그인 기능을 한방에 만들어준다.

 

10. 이메일 관리

- mailgun: 트랜잭션 이메일. 트리거, 이벤트 이후 발송되는 이메일 ex) 이메일 인증. 한달 1만통 무료
- mailchimp: 마케팅용 이메일. 뉴스레터 발송

11. SSL Certificate

- letsencrypt

 

12. 무료 인프라

Backend

- heroku
- AWS Free-tier. 1년간

Frontend

- GitHub pages
- Netlify

Serverless

- AWS Lambda: 1M free requests per month
- Google Cloud Functions

 

13. Database

- Amazon DynamoDB: 25GB 무료 스토리지
- Google Cloud Firestore: 1GB 제공
- mongoDB: MongoDB Atlas
- FaunaDB: GraphQL 서버리스 데이터베이스

 

14. File Uplaod (프로필 사진, 파일 등)

- Google Cloud Storage: 5GB 무료
- Cloudinary: 사진 저장에 최적화. 사진 용량 압축, 편집, 자르기 등등 기능 제공

 

15. Error Alarm

- Sentry

 

16. Real-time 채팅

- Pusher

웹 사이트에 채팅을 아주 쉽게 붙일 수 있다. 리얼타임 걱정을 안해도 된다.

 

17. Push Notification

- One signal

 

18. Feed 기능

- getstream.io

인스타그램 피드, 누가 누구를 팔로잉, 댓글 등 기능
일일히 피드 기능 구현 안해도 되고, 리얼타임으로도 작동한다.

 

19. 분석

- Google Analytics
- hotjar: 유저가 어떻게 웹사이트를 쓰는가
- mixpanel: 유저 액티비티

 

20. 프로젝트 시간관리

- Waka Time: Visual Studio Code Extension 중 하나. 

언어별 시간을 얼마나 쓰는지 그래프로 정리해준다.

 

 

 

 

 

 

 

https://www.youtube.com/watch?v=u3Ph_M2bySg