나만의 홈페이지 만들기 대작전 2
수정은 선택 아닌 필수과정, 홈페이지 제작기 (2)
킥오프 미팅이 끝나고, 바로 최종본이
나올 거라 생각했다
"너무 바로 나오면 어쩌지?(너무 좋다ㅠㅠ)"
서울에서 있었던 첫 번째 미팅이 너무 순조로웠다. 로고는 디자인 취향이니,
첫 시도가 100% 맘에 안 들었어도
괜찮다고 생각했다.
하지만 레이아웃은 함께 이야기했으니
괜찮겠지! 마음을 놓았다.
나중에 알게 됐지만 이런 작업물은 회의를 아무리 잘했어도 한 번에, 빠르게
100% 맘에 들기는 정말 어려운 것이었다.
( 미리 말하자면 나는 홈페이지 업체에 만족한다. 첫 번째에 최종 결과물이 나오지 않았지만 끝까지 작업에 책임감을 가져 주셨다. 이런 협업에서 최고의 미덕은 빠른 피드백과 포기하지 않는 마음가짐이다. 이런 점에서 정말 좋은 업체를 만났다고 생각한다.)
가장 핵심이라 생각했던 홈페이지 메인 페이지. 홈페이지 작업물은 피그마를 통해 받았다. 생각했던 느낌이 아니었다. 대표님과 이야기를 나눴는데 디자이너님께 몇 가지 전달이 덜된 느낌이었다.
일단 레이아웃. 레이아웃이 정형화되지 않길 바랐는데, 너무 정적인 느낌이 들었다. 중간에 규칙적으로 들어간 버튼들도ㅠㅠ 빠졌으면... 했다.
두 번째로는 색감. 짙은 네이비 색은 요청한 적이 없는데 들어가 있었다. 이건 빼달라고 해야지.. 하며 끄적였다.
*수정사항 정리하기
1) 아이패드에 보내주신 피그마 페이지를 모두 캡처하여 일단 애플펜슬로 적기 시작했다.
2) 모든 페이지마다 수정 사항을 적고 노션에 넣었다.
3) 그 아래 텍스트로 다시 한번 보기 좋게 정리했다. (이후 수정에서도 이렇게 작업했다.)
1) 메인 페이지 요청사항 정리
*의견 종합
-직관적으로 콘텐츠가 보였으면 좋겠습니다.
-여백과 버튼, 색으로 시선이 분산되는 것 같습니다. 정리 부탁드려요.
-색은 오렌지, 그린 이렇게 써주세요!(+블랙 하나)
-레이아웃 그리드 자유롭게 조정할 수 있게 부탁드립니다.
-하단의 회사 소개 부분(footer) 크기 작아져도 될 것 같습니다.|
(콘텐츠 레이아웃에 힘을 실어주고 싶습니다)
1. 같은 모양의 그리드 메인 단조롭고 딱딱해서 지양함
→ 콘텐츠 레이아웃 크기 변화 있게 만들어 주시길 요청 <킥오프 미팅 당시 요청 사항>
2. 동그란 버튼들, 연두색 빗금(?) 삭제하고,
콘텐츠 레이아웃으로 채워주세요.
3. 크게 봤을 때, 네이비와 오렌지가 너무 두드러짐
(특히 버튼들이 화면을 복잡하게 만드는 것 같습니다.) → 네이비는 빼주세요. 오렌지와 그린을 메인으로 하고 싶어요.
4. 로고 AI 파일 따로 요청(추후 색감 수정을 위해!)
2) 검색 페이지 요청사항 정리
1. 초록 빗금(?) 삭제
2. 검색 창 문구 수정
3. 버튼 디자인 전체적으로 수정하거나, 삭제
3) 콘텐츠 작성 페이지 요청(고민) 사항
1. 썸네일 템플릿 직접 수정 가능 여부, 썸네일 이미지 선택 가능 여부
2. 사진 넣을 때, 템플릿 적용 가능한지?
3. 개별 콘텐츠에서 추천 콘텐츠 몇 개 보이게 할 수 있을까..?
4. 검색 seo에 잘 잡히게 하려면?
콘텐츠 페이지는 특히 맘이 쓰이고 고민이 됐다. 글을 직접적으로 많이 올려야 하는 곳이기 때문이다. 이번에 콘텐츠 페이지에 샘플 글도 올려보면서 알게 된 것이 있다.
- 콘텐츠(글과 사진)를 볼 때는 모바일과 pc환경 두 가지가 있는데, 무조건 모바일이 기준이다.
일반적으로 홈페이지는 모바일 사용자가 훨씬(90% 이상) 많다. 작업은 pc로 하지만, 글은 모바일로 읽는다. 사용자가 기준이 되어야 한다. 그래서, 모바일에서 글꼴과 행간이 예쁘게 보이는지 확인해야 한다. 개발자분들도 거의 알고 계시지만 다시 한번 체크할 것!
- 대부분의 호스팅 페이지는 사진 템플릿을 표로 적용해서 넣을 수 있다.
사진 여러 개를 2*2로 넣거나 3*3등 자유롭게 넣고 싶다면 작성 시, (한글프로그램처럼) 표 기능을 사용하면 된다. 나는 처음에 이 부분이 너무 걱정스러웠는데, 이렇게 해결. 만약 표로 해결할 수 없는 레이아웃을 사용하고 싶다면 일러스트레이터나 포토샵을 사용해야 한다.
- ⭐또 하나, e북에서 영감을 받아서 내 홈페이지에 적용시킨 기능 하나.
내 홈페이지에서는 폰트 크기와 행간을 사용자가 조절할 수 있다. 처음에는 pc와 모바일 모두 최적의 행간, 폰트 크기를 찾으려 노력했다. 적절한 중간 지점에서 기본 설정을 해두기도 했다. 하지만 아무리 생각해도 사용자마다 글을 읽는 페이지에 대한 선호가 다를 거라는 생각이 들었다. 그때 생각난 e북! e북은 사용자가 폰트 크기와 행간을 조절해서 읽을 수 있다. 내 홈페이지에 이 기능을 넣을 수 있다면 좋겠다고 생각해서 이 기능을 요청했다.
이렇게 요청 사항을 정리하고, 고민을 나누며 두 어번의 수정 과정을 보냈다. 개발과 웹디자인에 문외한이라 피드백받기 어려우실 텐데 끝까지 함께 해 주신 업체에 감사하다. 다음 글에서는 게시물을 (부디) 올리고 깨닫게 된 사항과 소개글, 완성본 짜잔-등을 정리하려 한다. :)
햇수로 4년차 프리랜서 에디터이자 기획자의 우당탕탕 생존기가 연재됩니다!
초기 프리랜서의 생존꿀팁이 대방출될 예정이니,
구독 부탁드려요 : )
*인스타그램 놀러오세용
다정한 콘텐츠 에디터✍� | 다인 Dain(@manypeople__j) • Instagram 사진 및 동영상
