👉🏻 완성된 사이트 보러가기
👉🏻 Github 보러가기
1. 기획 & 디자인 계기
구글 개발자가 만든 멋진 포트폴리오를 보고
'나도 만들고 싶다!' 로 시작하게 된 프로젝트!
크게 기획적인 부분이 많지는 않지만
기획 컨셉에 충실한 사이트를 만들고 싶었음
2. 기획 & 디자인 과정
1. CAT-CHA 이름의 뜻
cat + tea(차) 의 합성어로
캣닢 사이트의 로고 제작을 위해 직접 창작한 이름인데
이번 프로젝트 컨셉인 고양이와 잘 어울려 선택했다!
물론, 뜻은 아래의 두가지 의미를 섞어
- get+your 의 의미를 담은 getcha!
- 랜덤뽑기의 일본말 가챠!
cat을 가지다 + 뽑는다 라는 말로 Catcha!
2. 가장 좋아하는 첫 페이지
어떤 게임으로 구성할지보다
어떤 모습을 제일 먼저 보여줄까? 가 더 중요했다
놀이동산 입장 전,
마스코트 캐릭터들로 설렘이 시작되듯
첫페이지에 컨셉 포인트가 있으면 좋겠다고 생각했다
그래서 한번쯤 만들어보고 싶었던,,
눈알굴리는 고양이!를 선택했다
괜히 진부한 메시지 몇개 던지기보단
말없이 눈알굴리기 쇼(!)가 더 재밌을 것 같았다
3. 게임 기획 및 디자인
평소 작성해둔 아이디어 노트에서
첫 프로젝트로 도전해볼만한 4가지를 선정했다!
( = 나중에 만들면 시시할 것 같은)
[ 1. Boxgame ]
- 기능 요약
고양이를 드래그하여 같은 색 상자에 넣기
- 디자인
고양이는 무늬보다 직감적으로 색상이 잘 보였으면 했다
그래도 너무 단조롭지 않도록
다양한 자세를 배치해주었음
[ 2.Darkgame ]
- 기능 요약
토글 누르면 암흑으로 바뀌고
손전등 마우스를 이용하여 고양이 찾기
- 디자인
낮과 밤의 배경이 똑같지만 대조되었으면해서
같은 일러스트에 색상만 변경했고,
토글은 디자인을 직접 입혀주어
낮과 밤을 직관적으로 보이게 만들었다
고양이는 가만히 세워둘까 했는데
날파리마냥 움직이는게 재밌을것 같아 날개를 달아주었다
[ 3. Cardgame ]
- 기능 요약
흔한 카드게임이다
열심히 뒤집다가 같은 일러스트가 나오면 카드가 사라진다
- 디자인
카드라는 이미지하면 보통 타로카드, 원카드, 고스톱이 연상된다
그 중 제일 컨셉에 맞는건 타로카드!
보라색의 귀여운 고양이 발 모양의 타로카드라니,,
냥냥신의 행운이 함께할 것 같아서 디자인하면서도 행복했다
뒷장의 일러스트들은 내가 좋아하는 고양이 모습들을
기억하기 쉬운 가벼운 색상들을 위주로 그렸다
기억력 게임이니까..?
[ 4. Spacegame ]
- 기능 요약
빙글빙글 블랙홀 속,
빙글빙글 고양이 들,
클릭해서 탈출시키되
구출 못한 고양이가 남으면 안되므로
텍스트로 몇마리 남았는지 알려준다
- 디자인
배경은 무조건 우주로 하되 canvas를 써보기로했다
블랙홀은 직접 선으로 그리다가
밋밋한 느낌이 들어 ipsum을 왕창 넣어주니
(우리가 시달리는) 텍스트 블랙홀에 갇힌 것 같아
더 마음에 들었다
고양이는 우주답게 유리머리통을 씌워주고
이전의 게임들에서 그리지 못했던 여러 패턴의 몸통을
마음껏 그려주었다
3. 디자인 시안
