한국 기획자 컨퍼런스 2023_우피 웹페이지 제작기
아임 웹 디발자 #1. 피그마, 노션, 우피로 랜딩페이지 제작하기
대한민국의 IT 기획자 다 모여라!
한국 기획자 컨퍼런스 2023 웹 페이지 제작기
*맥비 기획자 커뮤니티에서 2023년 7월 8일 토요일 "기획자의 성장과 기획의 스킬"이라는 주제 아래에 제3회 한국 기획(자) 컨퍼런스 2023을 주최합니다. <마감임박!> https://plannerkr.oopy.io/
# 프로젝트 작업 동기
종종 기획 업무를 하다가 궁금증이 생기면, 고수 기획자님들께 도움을 받던 기획자 커뮤니티에서 기획자 컨퍼런스를 주최한다는 소문을 듣고 웹페이지 제작 자원봉사자로 지원하게 되었습니다. 기획자 커뮤니티에 기여한다는 마음에 즐거운 경험이었습니다. :)
# 제작 방식 채택
제작 방식은 피그마, 노션, 우피 조합을 채택했습니다. 사전에 주최 측을 통해 이미 들어갈 내용을 완벽히 전달받았기에 콘텐츠에 대한 걱정은 없었고, 대신 최소한의 제작 비용, 제작 기간, 유지 보수 측면의 이점, PC/모바일 사용성 등을 고려해서 어떻게 '잘' 제작할지를 고민했습니다.
처음에는 요즘 주요 관심사인 아임웹으로 제작하려고 했었는데, 아무래도 아임웹은 웹사이트 제작 시 하단에 '무료 사이트입니다'라는 배너가 표시되어 컨퍼런스 랜딩페이지로는 적절하지 않을 것 같았습니다. 또한 그 배너를 제거하려면 월 단위로 2만 원 정도의 호스팅 비용이 발생하니 1만 원 이하 비용인 우피를 선택했고, '노션 + 우피' 조합을 채택했습니다.
# 랜딩 페이지 디자인
레퍼런스는 이전 회차들의 컨퍼런스 페이지 및 기타 행사 포스터 등을 참고하였습니다. 피그마로 랜딩페이지를 디자인하면서는 '어떻게 PC/모바일에서 잘 보이는 디자인, 전달력 있는 디자인을 할 수 있을까?'가 관건이었습니다. 화려한 디자인보다는 컬러 대비나 폰트 사이즈를 고려해서 한 벌의 디자인으로 PC/모바일 동시에 활용할 수 있어야 했고요.
또한 기능상 페이지 내 일부 영역들은 링크가 들어가야 해서 특정 웹 사이트로 이동할 수 있도록 버튼을 디자인했습니다. 링크가 들어갈 영역은 이미지를 쪼개도 크게 이상하지 않도록 디자인했습니다.
# 노션 + 우피 제작 후기
노션을 쓰다 보면 늘 노션스러운 인터페이스가 복잡하게 느껴질 때가 있습니다. 그래서 우피를 적용하여 상단 부분 GNB , 공유 아이콘, 검색 등은 완전히 제거하고 간단한 코드작업으로 타이틀도 숨김처리했습니다. 덕분에 군더더기 없는 깔끔한 랜딩페이지를 (거의) 코드 없이 (노코드) 작업했습니다.
또한 컨퍼런스 초청을 위해 사용자 입장에서 링크를 자주 공유할 것이라 생각하여, 공유링크의 썸네일도 디자인하여 추가했고, 행사를 떠올릴 수 있는 URL 링크(호스트네임)도 "https://plannerkr.oopy.io/" 으로 적용시켰습니다.
피그마 디자인 > 노션 적용 > 우피 적용 (하이퍼링크, 커스텀주소, 썸네일 적용)*한국 기획자 컨퍼런스 2023의 성공적인 개최를 응원합니다 - !
배해나 프로젝트 (배우고 해 보고 나누기)
IT분야 서비스 기획자로 작은 기여를 하고 있습니다.
비영리 목적의 단체/행사를 위한 기업용 홍보페이지, 웹사이트 제작에 있어
무료 컨설팅, 기획/디자인, 제작을 도움드립니다.
구체적으로는 아래와 같은 주제에 대해서는 관심이 큽니다.
- 유기동물 보호(유기견, 유기묘)
- 사회적 소외계층을 위한 목적
- 기타 교육적 목적
아래 이메일로
단체 소개 자료 / 프로젝트 목표 / 희망 출시일을
간략히 보내주시면 검토 후 연락 드리겠습니다.
협업/제안 :
loreen@selectway.co (셀렉트웨이 김로린)
