쇼핑앱을 만들어보자 3탄입니다. 얼마후면 프로젝트에 투입되서 강좌를 얼마만큼 빠르게 업데이트 할수 있을지 모르겠네요.

보는 사람도 적은데 말이죠! ㅋㅋㅋㅋ

 

오늘은 메인에 이어서 메인페이지의 기획전을 클릭했을 때 나타나는 페이지를 제작할 거에요.

일단 완성 화면부터 보시죠.


![Image of Yaktocat](http://cfile10.uf.tistory.com/image/217FF14D55DBE589032B9E)


메인의 느낌을 최대한 가져왔고요.기획전 리스트이기 때문에 금방 작업이 가능한 화면들이죠.




![Image of Yaktocat](http://cfile6.uf.tistory.com/image/21567A4B55DBE5721F8490)

위처럼 가이드라인을 쳐줍니다. 뒤로가기 아이콘과의 거리는 36px이고요 높이값은 110px입니다.





![Image of Yaktocat](http://cfile26.uf.tistory.com/image/276E124B55DBE5740BC91C)

그 밑에 메인에 썻던 이미지를 넣어줍니다. 이미지의 높이값은 470px입니다.



![Image of Yaktocat](http://cfile25.uf.tistory.com/image/2250B14B55DBE57522495F)

검은색 #000000 컬러로 레이어를 추가한 뒤 색을 입혀주시고요. 알파값 50%를 적용해줍니다.




![Image of Yaktocat](http://cfile10.uf.tistory.com/image/2355884B55DBE5771E7B8B)

이미지를 블러효과를 줘서 앞에 나중에 나타낼 텍스트가 잘 보이게 할겁니다.

Filter > blur > Gaussian Blur 에서

Radius값을 12로 줍니다.


![Image of Yaktocat](http://cfile10.uf.tistory.com/image/276D0D4B55DBE5780C0A8D)

그 위에 2탄에서 줬던 텍스트를 올려줍니다. 2탄 안 보셨던 분은 2탄 보셔야 해요~~ ㅎ




![Image of Yaktocat](http://cfile2.uf.tistory.com/image/2551F24B55DBE57A218E0C)

그 아래 이미지 리스트가 들어갈 BG에 색을 지정해서 넣어주세요. COLOR값은 #ebebeb입니다.



![Image of Yaktocat](http://cfile3.uf.tistory.com/image/276F3D4B55DBE57C0AAB5E)


이미지 리스트의 크기는 336x496으로 잡았고요. 2열씩 들어갈 거에요.


![Image of Yaktocat](http://cfile27.uf.tistory.com/image/223BCC4D55DBE57D35759F)

그 안에 296x296px의 정사각형 BG를 만들어주시고요. 색은 어떤것이든지 상관없습니다.




![Image of Yaktocat](http://cfile28.uf.tistory.com/image/2174004D55DBE57E0C3B31)


사각박스 안에 쇼핑몰 관련 이미지를 넣어주시면 되요. 정사각형 색상BG에 마스크로 이미지를 올려주시면 이미지 크기가 어떻든지 잘 들어가겠지요^_^

텍스트는 윤고딕 540을 이용했고요. 폰트 구매를 안 하신거라면 연습용으로만 사용하세요.



![Image of Yaktocat](http://cfile30.uf.tistory.com/image/267D3D4D55DBE57F0510A4)

위 2가지 타입으로 한번 만들어 봤어요. 리스트를 하나만 적용하면 안되고..여러 타입으로 해보고 어떤 느낌이 더 잘 어울릴지 판단하시면 됩니다.

저는 이 시안 자체가 이미지 위주 타입이라 오른쪽 이미지를 사용하기로 했습니다.



![Image of Yaktocat](http://cfile30.uf.tistory.com/image/26380E4D55DBE5813C5F64)

리스트에서 어떻게 나올지 적용한 샷입니다. 썸네일과 함께 의류에 대한 타이틀 설명까지 들어가 있어서 구매에 조금 더 도움이 될 듯 합니다.

다만 전체적으로 보면 텍스트가 많이 들어가 있어 복잡한 느낌을 주고 있네요



![Image of Yaktocat](http://cfile24.uf.tistory.com/image/276ECC4D55DBE5831163F7)

이건 다른 타입을 적용한 것인데요. 일단 옷에 대한 설명은 글보다 이미지로 하는것이 설득력이 있어 보입니다.

이미지가 고퀄의 이미지를 제공해 주는 그런 사이트라면 더욱 더 좋겠지요 ^^


![Image of Yaktocat](http://cfile10.uf.tistory.com/image/2465B04D55DBE5871980F2)

위 이미지는 저는 리스트나 썸네일 들어가는 이미지를 만들때 한꺼번에 많이 만들어놓고 괜찮은 것들을 골라 써서 그래요.

조금 더 시간이 걸리겠지만 다양한 느낌을 알아보는 데는 좋은 방법이라고 생각합니다 .



![Image of Yaktocat](http://cfile10.uf.tistory.com/image/217FF14D55DBE589032B9E)


자 이렇게 해서 완성한 기획전 리스트 페이지입니다. 참 쉽죠~



조금이라도 도움이 되셨다면 리플이나 팝롭을!!! 보팅은 안 해주셔도 좋습니다 헤헤헤