brunch

You can make anything
by writing

C.S.Lewis

by oksambari Nov 22. 2021

#5-0. 포트폴리오 웹사이트 만들기

IMPREZA 테마로 포트폴리오 사이트 만들기

내가 작업한 것들(포트폴리오. portfolio)을 모아 보여주기 위해 웹사이트를 제작하는 경우도 있습니다. 이번에는 워드프레스로 이런 포트폴리오 웹사이트를 만드는 과정을 주제로 작업 과정을 한 번 다뤄보겠습니다. 




먼저, 워드프레스 CMS로는 포트폴리오라는 콘텐츠를 어떻게 관리를 하는지 알면 제작뿐 아니라 차후 운영에도 도움이 될 듯합니다. 워드프레스 간단 설치(?)를 하고 나면 기본적으로 페이지(page)와 글(post)이라는 두 콘텐츠 종류를 이용할 수 있습니다.(※ 기본 포스트 타입) 물론 이 상태로 글이라는 포스트 타입을 이용해서 내 작업물을 보여주는 방법도 있겠지만, 뭔가 글과는 다른 레이아웃에 사진이나 작업물의 소개에 중점이 될 콘텐츠를 따로 관리를 하는 게 필요할 때가 있겠지요. 


워드프레스는 CMS로서 이러한 포스트 타입(post type)을 필요시 추가하는 방법이 있습니다. ( > 커스텀 포스트 타입 만들기 )   단, 이런 포스트 타입을 추가하는 건 쉽지만 외부에 보일 화면을 만들어 내기 위해서는 목록을 위한 템플릿, 상세 내용을 볼 수 있는 화면을 위한 템플릿 등 연결 부분들에 대한 코드 작업들이 이뤄져야 합니다. (※ 마찬가지로 이 순서에 따라 제작 필요 >  https://wphierarchy.com/ ) 테마에 포트폴리오라는 형식을 위한 파일들이 추가가 되어야 하는 것이죠. 


그럼 코딩 작업이 필요한 것인가? 

물론 그렇게 하지 않더라도, 배포용 무료·유료 테마들 중에는 포트폴리오(portfolio)라는 포스트 타입을 고려를 해서 제작이 돼 있는 게 많습니다. (완전 블로그 목적으로 나온 테마를 제외) 

최근에는 다양한 효과나 레이아웃을 가진 테마들이 많이 개발된 거 같은데요, 그러니 만약 내 콘텐츠에 맞고 원하는 디자인의 유료 테마가 있다면 그중에서 골라서 사용을 해도 좋을 듯합니다. (예: themeforest portfolio themes)  




저는 포트폴리오용 테마를 설치해서 이용하는 방법 대신, 심플한 디자인의 웹사이트를 참고하여 Impreza 테마를 활용해서 최대한 간편하게 제작하는 것을 소개해 보겠습니다. 

※ 레이아웃 참고용 사이트 : https://preview.codeless.co/folie/portfolio-agency/  (폴리 테마 데모들 중 포트폴리오용 데모 버전)

필터 기능이 있는 포트폴리오 목록. 목록 하나를 클릭하면 포트폴리오의 상세 페이지로 이동


페이지 형태로 About, Contact가 제작 돼 있습니다

 

블로그의 목록과 상세 페이지






제작 과정을 예상해 보면 대략 이렇습니다. 

1. 기본이 되는 테마 옵션 설정(콘텐츠 폭, 컬러, 폰트) + 포트폴리오 관련 설정

2. 헤더, 푸터 만들기 

3. 포트폴리오 목록 디자인, 상세 페이지 템플릿 만들기

4. 블로그 목록 디자인, 상세 페이지 템플릿 만들기 

5. 잔여 페이지 (about. contact 등) 제작 




그럼 다음 글에서 차례대로 이어가 보겠습니다. 



계속...



매거진의 이전글 #4-6. 검색 결과 템플릿 만들기
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari