Vue로 Slide Puzzle 만들기(feat. 개발자가 선배님 결혼식을 축하하는 법)

 

숨기지 않는 팬심

거두절미하고, 회사 선배의 결혼 게시글을 쓰게되었는데...

이게 참, 사내 인트라넷에 올리는 거니까 흔히 말하는 회사스럽게 쓸 법도 한데,

B급 갬성글을 좋아하는 나로써는 그런 딱딱하고 평범한 게시글은 지양하는 편이다.

 

실제로 3년전에 한땀한땀 정성스레 썼던 13년지기의 결혼게시글은...

게시판 글 용량초과로 10번이나 Reject 당하고 겨우 올렸던 기억이 있을 정도니까.

 

그래서 이번에도 노멀한 글은 결코 쓰고 싶지 않았고,

그러던 차에 예전부터 만들어보고 싶었던 결혼 기념 미니게임을 만들어서 올리면 어떨까, 라는 생각이 들었다(이 생각 들자마자 뭐부터 개발할 지 신나기 시작함)

 

이런 일에 진심인 편.

그 와중에, 단 한가지 아쉬운 점이라면 결혼식이 토요일이라 통상적으로 수요일에는 결혼게시글을 올려야하는데...게시글을 올려달라는 부탁을 받은게 월요일 오후다보니, 만들고 싶었던 욕심만큼의 퀄리티있는 아웃풋을 낼 시간이 없었다는 것이다.

 

그래서 게임 자체는 심플하면서도 일정 수준의 완성도도 놓치고 싶지 않았고,

누구나 관심을 가지고 쉽게 해볼법한 게임을 만들어야겠다고 생각했는데

 

첫 번째로 떠올랐던 건 예전에 Vue Guide 페이지에 이스터에그로 심어놓은 팩맨이었지만 팩맨에 결혼 축하성 이벤트를 심기엔 애매했고, 두 번째로 떠오른 건 쿠키런 같은 러닝게임이었지만 평일 퇴근 후에 이틀만에 후다닥 해서 만들 수 있을까 싶은 생각에 다음으로 미뤄뒀고,

 

그렇게 만들게 된 게, 이번 포스팅의 주제인 Slide Puzzle 이다.

 

솔직히 이거 안 해 본 사람 없잖아요?

 

1. 키보드 방향키만 조작하면 되는 쉬운 편의성

2. 이 게임 안 해 본 사람은 없을 거라는 친근한 접근성

3. 무엇보다 웨딩 사진을 베이스로 하면 결혼 기념이란 의미에 부합하는 목적성

 

여기에 그리 많은 시간을 투자하지 않아도 될 것 같다는 판단까지 어우러졌다.

 

그렇게 월요일 퇴근 길 버스에 앉은 나는, 신나는 마음으로 설계를 시작했다.

 

내가 갤노트를 애정하는 이유가 바로 이 기능 때문이지.

실제로 버스를 타고 우리집까지는 20분 남짓걸리는데,

주효한 피쳐들은 그 사이에 대략 완성할만큼 Slide Puzzle의 설계는 쉬웠다.

 

1. 퍼즐조각(PuzzlePiece.vue)

• 각각의 퍼즐조각(Puzzle Piece)들은 컴포넌트일 것.
• 각 조각들은 본인들의 좌표(top,left)를 가질 것
• 본인들이 보여줘야 하는 만큼의 이미지 Split 좌표를 가질 것
• 퍼즐 이미지 원형이 변경됨에 따라 변경되야 함

2. 퍼즐(Puzzle.vue)

• 이미지 원형에 대한 정보를 가질 것
• 퍼즐 조각들에 전달할 정보를 가질 것
• 키보드 이벤트 처리

딱 요정도가 시작점이었고, 필요한 파일도 사실상 2개밖에 없었기에 그리 어렵지는 않았다.

 

다만, 개발하다보니 조금 더, 조금 더 욕심이 나는 부분이 있어서 아래와 같은 사항들을 추가했다.

1. 퍼즐을 그냥 넘기면 뻔하니, 이전 단계를 풀어야 다음 단계로 넘어갈 수 있게하자.
2. 처음부터 뒤섞인 상태로 보여주니, 풀 수 있게끔 유도하기 위해 원본을 보여주는 힌트를 넣자
3. 배경이 심심하니 blur 처리로 나머지 웨딩 사진을 보여주자
4. 초기에 Random 함수로 퍼즐 조각들을 막 흐트려놓으니 풀리지 않는 Slide Puzzle이 발생된다. 따라서 완성된 형태의 세팅을 한 이후에, 조각들을 섞는 함수를 별도로 셀프 호출하자.
5. 이미지 크기는 w600 x h800 으로 고정(퍼즐 좌표 및 Split 값 제한) => 차후 개선필요

 

그 결과, 본 포스팅의 최상단에 있는 Slide Puzzle 이 완성되었고,

사내 Github의 Page 기능을 통해 배포후 해당 링크를 결혼 게시글에 함께 올릴 수 있었다.

물론 게시글도 B급 갬성 가득 담아서 웨딩 사진과 적절히 밀당하며 작성했고...

 

만족스런 반응에 보람을 200% 느낍니다 >_<

다음날 데일리 스크럼시간에 깜짝 공개함으로써 팀원들의 즐거운 피드백과

예전에 같이 일했던 동기로부터 미쳤다라는 찬사(?)도 받을수 있었다

 

이후에 해당 프로젝트에서 이미지(웨딩사진)들을 아이유 사진으로 변경하고

내 깃헙에 레파지토리를 별도로 생성해서 올려둔 상태다.

 

시간이 나면 차후에 리팩토링도하고,

발 붙인김에 이런 류의 미니게임도 좀 더 구상해서 미리 만들어두면

또 언젠가 지인으로부터 이런 축하 요청이 있을때 쓸 수 있지 않을까? 싶은 생각이 들었다.

 

관련 Github 링크와 Demo 사이트는 아래를 참고해주세요 :)

Slide Puzzle Github Repository

Slide Puzzle Demo