[Spin Soccer]웹프로그래밍 수행-웹 사이트만들기/디자인

[Web Programing

웹프로그래밍 수행평가로 사이트 만들기가 주어졌다. 각자 페이지 2개씩 만들고 나는 디자인을 추가적으로 맡았다.  어떻게 만들건지 종이에 시안2개씩 만들어보고 최종결정해서 작업을 시작했다.

해상도: 1024x600px로 맞추어 작업.

기타 shadow효과는 css에서.

1. MainPage(메인페이지)

맨 처음에 구상한 메인페이지에서 하단이 허전하고 버튼이 쓸데없이 많아 시선이 분산될것이라고 생각하고 버튼 갯수를 최소화 시켰다. 그리고 중앙, 상단에 각각2개씩 배치하여 안정감을 주었다. 만드는 중간에 가운데 soccer에 공모양을 빙글빙글 회전시키는 것도 좋아보여 기획에 추가했다--> 마지막에 취소해버렸다.

2. icon(아이콘)

실행기기를 애플 iPad에 맞추어서 개발하는 바람에 웹앱으로 바탕화면에 쓰일 아이콘이 필요했다. 기존 iOS6에 맞추어 스큐어모피즘 효과를 주려했지만 이번 iOS7에 맞춰 미니멀리즘 컨셉으로 만들었다. iOS7에 맞춘 게임 아이콘을 아직 보지 못해서  그냥 간결하게 만들었다.  

3. btn_info(i인포 버튼 이벤트)

실행기기를 애플 iPad에 맞추어서 개발하는 바람에 웹앱으로 바탕화면에 쓰일 아이콘이 필요했다. 기존 iOS6에 맞추어 스큐어모피즘 효과를 주려했지만 이번 iOS7에 맞춰 미니멀리즘 컨셉으로 만들었다. iOS7에 맞춘 게임 아이콘을 아직 보지 못해서  그냥 간결하게 만들었다.  

4. btn_howto(?조작 버튼 이벤트)

버튼을 누르면 손가락이 움직이는 모션을 보여준다. (JavaScript사용)

(동영상 캡쳐)

5. PAUSE(중단 이벤트)

이것도 최종에 적용되지 않았다.

MainPage__참고용 시간이 부족해서 모든 기능 구현을 구현하지 못하고 마감해버렸다. 나머지 애들이 만든 페이지를 이을 때 각자 다른 방법으로 구현하는 바람에 HowToPlay부분과 Start버튼과 이어지지 않아 다시 만들었다. GameSetting에서 GoalPost Size부분, Ball Size, Sound부분을 마져 구현해 놓지 못해서 아쉬었다.

SpinSoccer.z01

SpinSoccer.z02

SpinSoccer.zip