전체 글

돌림판 실사용 중에 발생한 문제

이전에 방송으로 사용될 돌림판을 만들어 컨텐츠에 도움이 되었으면 하는 마음에 개발하였던 돌림판에 문제가 발생했습니다.문제 발생발생한 문제에 대해 간단하게 이야기하자면,, 돌림판이 돌아가면서 일부 텍스트가 clearRect() 메서드에 영향을 받지 않았고 Canvas 영역에 텍스트가 번지는 현상이 발생했습니다. 돌림판 동작과 결과에 영향을 주는 문제는 아니라 치명적인 문제는 아니라 생각했습니다.다만, 방송으로 보여질 화면이기에 이러한 이슈도 해결하여 원활한 컨텐츠를 제공하고 싶었습니다.텍스트가 번진다고?Canvas로 애니메이션을 그릴 때, 프레임 단위로 clearRect() 메서드를 통해 화면을 지우면서 다음 프레임을 그려서 애니메이션을 제공해야 합니다. clearRect() 메서드를 활용해서 만들지 않는..

도트 이미지에서 색상 팔레트 추출하기

최근 들어서 개발에 소홀해지는 경우가 조금씩 발생하고 있어 정신차리고 개발을 계속 이어 나가보려고 합니다.이번 이야기는 이미지에서 색상 팔레트를 추출하는 방법을 이야기해 보려고 합니다.색상 추출을 하는 이유픽셀 팔레트 프로젝트, 이전 게시글에서도 이야기한 것처럼 도트 이미지를 업로드하면해당 이미지에서 사용된 색상들을 팔레트로 추출해 주는 서비스를 제공하기 위해서 필요한 기능입니다.색상을 추출하는 방법색상을 추출하는데 필요한 것은 Canvas API 로 지원하는 getImageData() 메서드를 활용해 구현할 것입니다. 이번 프로젝트에서는 이미지를 그냥 태그로 관리하는 것이 아닌 Canvas 를 활용했습니다.일반 img 태그로 관리할 경우 작은 이미지에 대한 스케일 처리를 하기가 힘들기 때문에 Canv..

작은 이미지를 캔버스로 옮기기

예전부터 캔버스에 대한 관심이 많아 프로젝트에 적용하는 시도를 했었습니다. 특히 개인적으로 만들어 보았던 프로젝트는 Music Visualizer, Minecraft 스킨 프리뷰 그리고 최근에 돌림판 등등 ..여러가지를 캔버스로 구현하고 결과물을 보며 뿌듯함에 젖어 있고는 했습니다. 이번엔 픽셀 이미지를 업로드하여 사용된 색상들을 추출하고 팔레트를 지원해 주는 사이트를만들어 보고자 시도하고 있었습니다. 그러한 과정에서 발생한 첫 번째 이슈에 대해 이야기하고자 합니다.첫 번째 이슈먼저 픽셀 이미지를 다룰 때 가장 신경쓰였던 점은 이미지의 크기였습니다. 보통 픽셀 아트를 그릴 때 디테일하게 작업할 경우, 기본 캔버스의 크기를 키우고 작업을 하게 됩니다.하지만 간단한 픽셀 아트의 경우, 8 x 8 부터 64 ..

도트 팔레트 추출 서비스

최근 도트에 대한 관심이 높아졌습니다.물론 직업적으로 삼고 싶은 것이 아닌 관심사, 취미로 도트를 그려보고 싶은 마음입니다. 도트를 그리기 전에 다른 분들이 만든 도트 아트를 보며 스타일을 분석하고 만들어 보고 하고 있는데,도트의 퀄리티를 올리기 위해서는 여러가지 스타일, 숙련도가 필요합니다. 그 과정에서 사용되는 명함 처리라던지 .. 그리면서 퀄리티를 올리기 위해한가지 원색만을 사용하는 것이 아닌 색에 변화를 주면서 어둡게 처리합니다. 여기서 한가지 떠오른 것이 도트 아트에서 색상 배치를 어떤 식의 스타일로 처리하는 지 보고 싶고,팔레트를 추출해서 색상의 변화를 확인해 볼 수 있는 서비스를 만들면 어떨까라는 생각이 들었습니다.도트 팔레트 추출 서비스란?도트 팔레트 추출 서비스는 말 그대로 도트로 그려진..

돌림판 동작 구현 #2

이전 내용처럼 코드를 조금 더 다듬고 정리하고 디자인까지 바꾼 후 글을 작성하러 왔다. 처음 결과물은 만들어 낸 것도 계속되는 이슈 속에서 탄생한 뿌듯한 결과물이였지만,아무래도 만들어 본 적 없던 알고리즘의 동작이라 자잘한 이슈가 발생했다. 그 말은 즉, 만들기에만 급했던 결과물이고 불안정한 코드임을 의미했다.다른 기능을 추가하기에도 재사용성이 좋은 메서드가 많이 없어 뭔가 추가할 때도 애를 먹었다. 그래서 동작은 그대로 유지하면서 코드를 싹 갈아엎자고 생각했다.코드를 살펴보면서 ..일주일만에 결과물을 내려다 보니까 생각보다 꼼꼼히 보지 못한 동작이 많았던 거 같다.그래서 나는 다음 2주 동안 코드를 살펴보고 테스트 중에 발생했던 이슈들을 고쳐보기로 마음 먹었다. 아니지,, 이슈들을 무조건 고쳐내기 위해..

돌림판을 만들게 된 이야기 #1

우연한 계기로 게임 룰렛 컨텐츠에 필요한 분에게 돌림판을 만들어 드리게 되었다.돌림판을 통해 게임을 뽑고 그 게임을 진행하는 컨텐츠라고 생각하면 된다.이는 내가 좋아서 만들어 본 것이기도 하고, 또 새로운 경험을 하게 되는 소중한 순간이였다.돌림판에 대해 생각해 보자돌림판은 기본적으로 회전을 하면서 멈추고 그 당첨 화살표가 바라보는 아이템이 당첨되도록 해야 한다.따라서 회전 애니메이션의 구현과 당첨 아이템을 도출해 낼 수 있는 동작 구현이 필요하다.돌림판 화면 만들기자연스러운 회전 애니메이션을 만들고 회전 앵글에 따라 데이터를 도출하려면 어떤 요소가 적합할까?그건 HTML5 Canvas API를 활용하면 될 거 같다. 물론 CSS를 활용하여 구현해 보아도 괜찮겠지만 여러가지 문제가 발생할 수 있다.CSS..

내가 만들어 두었던 팬사이트가 사라졌다 ..

오늘 3월 13일 .. 2년 간 열심히 공부할 겸 나와 같은 팬들을 위한 소통 창구였던 팬사이트가 사라졌다 ..사라진 이유는 2025년 2월 7일에 만료 예정이였던 계정에 대한 연장을 하지 않은 것이였다.그나마 다행이라고 하면 다행인 것인지 노션에 정리해 두었던 팬사이트에 대한 내용이였다.만료 예정인 메일을 이제와서 확인하다니 .. 너무 후회되지만 다음부터는 더 경각심을 가지고 관리해야겠다고 생각했다.복구 방법을 찾아보자 ..우선 따로 백업을 해 둔 데이터베이스는 없어서 아마 이전에 팬들과 올려둔 게시물들은 복구할 수 없을 거 같다.문의는 해 보려고 하지만 불가능하다고 생각하면 될 것 같다. 그 외에는 화면이라도 복구하려고 작업 중인데 이미 예전에 쓰던 유튜브 키나 필요한 데이터들이 컴퓨터를 포맷하면서유..

핸드 드립 입문을 한 지 3달 째

그 동안 개발을 하면서 공부에 집중하기 위해 게임, 취미 등 여러가지를 포기하고 모든 시간을 쏟아 부었다. 그렇기에 하고 싶었던 것들이 너무나 많지만 하지 못하는 시간이 제일 많았고,원래부터 좋아했던 취미도 못하는 상황이 많았다. 제일 힘들었던 것은 친구들을 잘 만나지 못했던 것 ..그래도 취미에 개발이 포함되어 있어 즐거움이 항상 따라다니긴 했다. 이번에 퇴사를 하고 나를 위한 시간을 사용하면서 핸드 드립을 배우게 되었다.첫 시작은 아는 지인의 카페 쇼 초대를 통해 핸드 드립 장비를 접하게 되었던 것으로 시작되었다. 핸드 드립에 필요한 것은 커피 드리퍼, 주전자, 그라인더, 종이 필터, 비커 등이 있다.그라인더로 원두를 원하는 크기로 갈아내고 드리퍼 위에 필터를 올려 주전자로 내리기 위해 필요한 것들이..