랜딩페이지를 직접 제작하게 되었습니다.



그동안의 노하우가 있으므로, 이 걸 제작하는 것 자체는 어렵지 않았습니다.


모양 만드는 건 거의 1시간만에 다 했구요.


하지만 관건은, PC와 태블릿, 모바일에서 모두 보여야 한다는 것이었습니다.




다른 부분들은 반응형 홈페이지 만드는 것과 별 다를 것이 없습니다.


가장 유의할 점은, 랜딩 페이지는 페이지의 특성상


컨텐츠가 가운데에 나오고 배경이 꽉 차는 형태의 디자인이 많이 나오는데


이런 경우 태블릿과 모바일에서 제대로 보이게 만들려면 -webkit- 프리픽스를 쓰는 부분이 존재한다는 것입니다.




위에 인스펙터로 캡쳐한 부분이 -webkit- 프리픽스를 반드시 써야하는 부분입니다.


첫 번째로는 배경의 background-size를 -webkit-background-size 다음에 적용해야 한다는 것이고,


두 번째로는 글자가 가운데로 올 때 쓰는 transform:translate(-50%,-50%); 를 -webkit-transform 다음에 적용해야 한다는 부분입니다.




두 번째 속성에 대해서는 저번 포스팅에서 좀 더 자세히 다룬 부분이 있으니 참고하시고,


첫 번째 배경속성을 제대로 넣지 않으면 이런 현상이 생깁니다.


다음은 LG G2에서 미리보기 한 것입니다.




두 캡쳐 중 위쪽 캡쳐는 -webkit- 프리픽스를 적용하지 않은 것이고, 아래쪽 캡쳐는 프리픽스를 적용한 것입니다.


이렇게 보니까 모바일에서 상당한 차이가 나죠?


특히 위의 디자인 같은 경우에는 글씨가 흰색이기 때문에


프리픽스를 제대로 적용해주지 않으며 글자가 보이지 않을 수도 있습니다.


LG G2는 해상도가 작은 스마트폰에 속하기 때문에, 해상도가 좀 더 큰 스마트폰이나 태블릿의 경우에는


프리픽스가 적용되지 않으면 가독성에 문제가 생길 소지가 있습니다.




랜딩페이지 만드는건 솔직히 쉬운 부분이기 때문에


해당 홈페이지 들어가서 소스코드만 보고도 금방 파악하실 수 있습니다.


물론 우리회사 뿐 아니라 다른 업체들도 랜딩페이지 많이 만드니까 그런 랜딩페이지도 좋은 참고가 되겠죠.





댓글을 달아 주세요

티스토리 툴바