디자이너 출신 PM이 퍼블리싱(html, CSS)을 배우면 할 수 있게 되는 것들

서당개 3년이면 풍월을 읊는다는데 에이전시에서 PM으로 일을 하다보니 간단한 html, CSS를 파악할 수 있게 되었다. 개발이 바쁠 때 간단한 오탈자나 컬러 등의 수정을 직접해보곤했다. 그러다보니 자신감이 붙어서 조금만 더 배우면 어딘가에 써먹을 수 있지 않을까 싶었다. "요즘 퍼블리싱 배워요."라고 하면 주변 PM이나 에이전시 대표님들은 기획에 더 집중하는게 어떻겠냐 우려섞인 대답을 하셨지만 결론적으론 전체 프로젝트를 매니징하는 입장에서 실무에 도움이 됐고 무엇보다 기획에 멈추지 않고 조금이나마 실체화 할 수 있어 좋다.

 

디자이너 출신 PM인 내가 퍼블리싱을 배워 어떤 것들을 할 수 있었을까?

아래 정리한 내용들은 어깨너머 배운 퍼블리싱과 디자이너 대상으로 진행된 8주 과정의 주말 코딩 수업으로 충분히 시도해볼 수 있었다. 조금의 기획과 디자인만 할 수 있다면 만들 수 있는 것이 무궁무진하니 PM뿐 아니라 UI/UX디자이너도 이 글을 참고해주었으면 한다.

 

1. 웹빌더 사이트 업그레이드

간혹 복잡한 기능을 요구하지 않지만 콘텐츠나 화면단에 전략이 필요하면서 예산이 적은 프로젝트가 생기는 경우가 있다. 그럴 땐  공수가 적게 들어가는 웹빌더를 제안해볼 수 있다. 이 때 간단한 퍼블리싱이 가능하다면 생기는 장점이 두가지 있다. ❶ 간단한 구성인데 웹빌더의 기능으로 만들 수 없는 요소를 만들 수 있다. ❷ 작은 인터렉션이나 UI를 추가하여 보다 나은 사용자 경험을 제공할 수 있다. 작지만 웹빌더이기 때문에 클라이언트가 감수해야하는 부분을 조금 더 섬세하게 신경썼을 때, 들인 에너지에 비해 만족도가 크게 높아졌던 것 같다. 이 작업은 직접하지 않아도 되지만 PM이 퍼블리싱에 대한 이해가 있을 때 퍼블리셔에게 요청할 수 있는 내용이기도하다. 나의 경우는 아임웹을 주로 사용하였는데 내 수준으로 할 수 있는 작업은 아래 리스트 정도였다.

• 특정 영역에 인터렉션을 적용하여 주목도 높이기
• TOP 버튼으로 사용성 높이기
• 스크롤 네비게이터로 콘텐츠 탐색을 원활하게 하기
• 플로팅 버튼으로 특정 링크의 접근성 높이기

 

2. 티스토리 블로그 커스텀하기

티스토리는 html, css편집기를 제공하여 다른 블로그 플랫폼보다 커스텀 여지가 높다. 이 블로그도 티스토리의 기본 테마를 기준으로 직접 커스텀하였다. 조금의 구성이나 컬러를 손보면 나의 아이덴티티를 훨씬 잘 드러낼 수 있다.

• 헤더, 본문 등 영역별로 웹폰트 적용하기
• 글자 크기, 간격, 썸네일 비율 등 리스트 형태 변경하기
• 카테고리를 스티키 형태로 적용하기
• 요소 별 기본 글씨 크기와 컬러 등 블로그 글의 기본 스타일 세팅하기

 

3. 포트폴리오, 레쥬메 사이트 만들기

좀 더 나아가서 피그마를 활용할 수 있다면 직접 포트폴리오나 레쥬메 사이트를 구상해서 만들 수 있다. 피그마로 구상한 화면을 퍼블리싱하고 깃허브에 올리는 것만으로도 인사담당자가 레쥬메 사이트에 접속할 수 있어 차별화된 인상을 남길 수 있다. 디자인에 대한 부담이 들 수 있지만 PM에게 기대하는 역량은 디자인이 아니니 부담없이 구성해봐도 괜찮다. 한 사이트를 기획 - 구성(디자인) - 개발(퍼블리싱) 이 한 사이클을 돌아 직접 만들었다는 것 만으로도 큰 메리트가 있다.

피그마로 구상한 레쥬메 사이트

 

깃허브를 활용해 구현한 레쥬메 사이트

 

4. 실무에 활용하기

PM이 퍼블리싱을 익히면 위의 작업들을 할 수 있다는 것 외에도 실무에 직접적으로 도움이 되는 부분이 분명히 있다.

• 디자이너와 퍼블리셔 간의 소통문제를 파악할 수 있어 디자인 단계에서 먼저 효율적인 아이디어를 제공할 수 있다.
• 어떤 부분이 프론트엔드 작업이고, 어떤 부분이 백엔드 작업인지 알게되어 적절한 담당자를 찾아 소통하기 수월하다.
• 어느정도 난이도인지, 작업 기간이 얼마나 들지 등을 파악하기 쉬워져 프로젝트 일정 계획에 도움이 된다.

위 사례들이 아니더라도 PM이 한 과업의 원리를 파악하는 것은 효율적인 프로젝트 운영에 큰 힘이 된다. 다른 직무에 대한 파악도 좋지만 퍼블리싱이 특히 도움이 된다고 생각하는데, 이유는 디자인은 화면기획과 맞닿은 부분이 있고 직관적으로 보고 의견을 나누기 쉽지만 이를 개발로 구현하는데에는 분명한 격차가 있기 때문이다. PM은 기획 뿐 아니라 전체 프로젝트를 매니징 한다는 점에서 구성원 간의 격차를 줄이는 방향으로 탐구하는게 어떨까 하는 것이 나의 개인적인 의견이고, 경험이다.