[App Design] 쇼핑몰 앱 만들기 3탄 - 기획전 만들어보기

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

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

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

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

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

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

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

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

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

Filter > blur > Gaussian Blur 에서

Radius값을 12로 줍니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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