brunch

You can make anything
by writing

C.S.Lewis

by oksambari Dec 04. 2021

#6-0. 상점 소개 사이트 만들기

워드프레스 사이트 제작 과정

최근 워드프레스로 만들어진 사이트들을 둘러보는 일이 많아졌습니다. '워드프레스 랜덤 뷰어'라고 해서 랜덤 하게 워드프레스 사이트를 찾아서 보여주는 사이트를 이용할 때도 있고, 또는 구글에서 '국내 워드프레스 사이트' 키워드로 검색을 해서 보는 경우도 있습니다. 보면 볼수록 뭔가 자존감이 낮아질 때도 있지만...(ㅜㅜ) 참고해서 배울 점들도 참 많은 듯합니다. 


둘러보면서 느낀 점을 잠시 적어보자면, 우선 일본어 워드프레스 사이트들은 디자인에 신경을 쓴 예가 정말 많구나 하는 것입니다. (랜덤 하게 나오는 사이트들로만 봤을 때. 주관적인 생각) 한글 사이트는 폰트의 중요성이 느껴지는 경우가 많았습니다. 폰트를 잘 고르던가 아니면 어중간한 폰트의 사이즈보다는 더 크게 보여주는 것도 좋을 것 같더라고요. 


며칠 보던 사이트들 중에 제일 눈에 띈 사이트 두 가지입니다. 

https://news.koreanair.com/ 

https://miwa-takada.co.jp/


이 중에 일본어 사이트에서 페이지 빌더로 따라 만들어 보면 효과나 화면 요소 활용에 도움이 될 부분들이 많을 것 같아 이번에는 일본어 상점 소개용 사이트를 만들어 보기로 했습니다. 






따라 하면서 배울 수 있었던 점은 크게 이런 부분들입니다. 

1. 메인 화면 맨 위쪽의 슬라이드 구조 (무거운 슬라이더 플러그인은 이제 그만!)

2. 트랜지션 효과들, 애니메이션 동작들 (화면에 요소 등장 체크, 마우스를 올렸을 때의 변화)

3. 이미지와 텍스트들의 배치(제가 추구하는 잡지 뷰), 모바일 화면 뷰로의 전환

4. 테이블 구조 (contact 정보, 연혁 표시) 



이번에는 대부분 페이지로 돼 있는 사이트이기 때문에 Impreza 테마와 페이지 빌더로 디자인을 표현하는 주요 활용법 위주로 한 번 정리를 해 보려고 합니다. 




계속... 

매거진의 이전글 #5-4. 남은 페이지들 (About, Contact)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari