개발 일지/도트 팔레트 추출

도트 팔레트 추출 서비스

JiWoo. 2025. 5. 20. 05:12

최근 도트에 대한 관심이 높아졌습니다.

물론 직업적으로 삼고 싶은 것이 아닌 관심사, 취미로 도트를 그려보고 싶은 마음입니다.

 

도트를 그리기 전에 다른 분들이 만든 도트 아트를 보며 스타일을 분석하고 만들어 보고 하고 있는데,

도트의 퀄리티를 올리기 위해서는 여러가지 스타일, 숙련도가 필요합니다.

 

그 과정에서 사용되는 명함 처리라던지 .. 그리면서 퀄리티를 올리기 위해

한가지 원색만을 사용하는 것이 아닌 색에 변화를 주면서 어둡게 처리합니다.

 

여기서 한가지 떠오른 것이 도트 아트에서 색상 배치를 어떤 식의 스타일로 처리하는 지 보고 싶고,

팔레트를 추출해서 색상의 변화를 확인해 볼 수 있는 서비스를 만들면 어떨까라는 생각이 들었습니다.

도트 팔레트 추출 서비스란?

도트 팔레트 추출 서비스는 말 그대로 도트로 그려진 이미지에서 색상들을 추출하는 것입니다.

추출된 색상 팔레트를 통해 색상의 변화를 확인해 볼 수 있는 것을 목적으로 개발하고자 합니다.

도트 팔레트 추출 서비스에 필요한 기능

팔레트 추출에 필요한 기능은 몇 가지는 없을 듯 하지만,

개발에 앞서서 기능을 미리 생각하고 차례 차례 기능 추가를 진행하는 것이 좋다고 생각합니다.

 

그러면 필요한 기능은 무엇이 있을까?

  • 이미지 업로드
  • 이미지 미리보기 화면
  • 이미지 내 색상 팔레트 추출
  • 추출된 색상 중 비슷한 색상의 정렬
  • 추출된 색상 다운로드
  • 추출된 색상 rgb, hex 값 클립보드

최소한의 기능으로 이 정도는 지원을 해야 팔레트 추출 서비스에 있어서 필요한 목적을 이룰 수 있다고 생각하고,

위에서부터 차례로 하나씩 개발해 나가면서 재사용이 가능한 추출 메서드들을 구현할 필요가 있다고 생각합니다.

최종 목표

나 뿐만 아니라 간단하게 팔레트를 불러올 수 있는 서비스를 이용할 수 있도록 배포를 진행할 예정입니다.

아직은 회사를 다니지 않고 있어서 배포 비용에 대해서는 부담이 되지 않도록 할 예정입니다.

활용할 기술

  • HTML
  • CSS
  • Javascript

왜 간단한 기술들을 활용하는가?

기능들이 정말 한정적이기도 하고, 사이즈가 큰 프로젝트도 아니기 때문에 React, Next 와 같은 기술이 필요없다고 생각했습니다.

그렇기 때문에 HTML, CSS로 간단한 화면 레이아웃을 구성하고, 자바스크립트 파일을 구성할 예정입니다.

 

사실 React, Next 를 활용해서 더 넓은 경험을 하고 싶은데, 아직은 활용할 만한 아이디어가 없기도 하고 ..

오버 엔지니어링은 하고 싶지 않습니다.

 

다음에 React 또는 Next 를 활용해 볼 수 있는 프로젝트를 생각해서 경험을 넓혀보고자 합니다.

 

배포

  • github.io 배포