👨🏻‍💻 Shield Maker

서비스 소개

Shield Maker | 기술 스택 뱃지를 간편하게 만들어주는 서비스

깃허브 링크 : https://github.com/SeanKim-416/shield-maker/

데모 사이트 : https://shield-maker.netlify.app/

개발 동기

부트캠프의 기초 프로젝트를 진행하고, 서비스 배포 준비를 하며 README.md로 서비스에 대한 정보를 작성 하던 중, 사용한 기술 스택을 뱃지 형식의 이미지로 나열하는 shields.io라는 서비스를 알게 되었습니다.

README.md와 같이 마크다운의 환경에서 <img/> 태그를 통해 기술 스택을 예쁜 뱃지로 생성해주는 서비스여서 많은 개발자들이 사용하는 것을 알게 되었습니다.

다만 직접 뱃지를 추가해가면서, 뱃지의 아이콘, 색깔, 뱃지 스타일 등을 직접 작성해야 하는 데에 불편함을 느낀 경험이 있었습니다.

'간단하게 기술 스택을 검색하고, 스타일을 고르면 자동으로 뱃지를 만들어주고, 간편하게 클립보드 복사를 할 수 있는 서비스가 있으면 좋지 않을까?' 라는 데에 아이디어를 얻어 개발하게 되었습니다.

프로젝트 참여자

• SeanKim

프로젝트 기간

2023.12.25 ~

서비스 버전

2024.01.15 v1 출시

🛠️ 기술 스택

• 쉴드 메이커 서비스를 통해 제작된 뱃지입니다.

개발 환경

버전 관리

배포

사용 라이브러리

⚙️ 동작 기능

랜딩 페이지

서비스에 대한 간단한 설명을 제공하는 페이지입니다. 하단의 '직접 만들기' 버튼을 클릭 해 에디터 페이지로 이동할 수 있습니다.

제작 페이지(/edit)

기술 스택 뱃지를 제작할 수 있는 제작 페이지입니다.

• 상단의 토글 버튼을 통해 결과를 미리 볼 수 있습니다.
• 드롭다운 버튼을 통해 원하는 뱃지 스타일을 지정할 수 있습니다.
• 입력창을 통해 원하는 기술 스택을 추가할 수 있습니다.

시연 영상

2024-01-15.4.34.36.mov

클립보드 복사 기능

2024-01-15.4.37.23.mov