framerLAB

HUBS 웹사이트 – 남은 과제들

미분류 / 작성중 / /

웹사이트 내용
  • 확실한 아이덴티티 컬러를 결정하고, 전반적인 디자인에 반영할 필요.
  • 게시물 작성법 A-Z를 다루는 매뉴얼 필요.
  • 섹션별 메인 추가 : NEWS, TV, RADIO 등
    • 신규 Widget Area 설치 필요
  • SI(Station Identity) 확립. 웹사이트 탑재.
  • 소개 페이지 개편
    • 방송국 소개 : Custom CSS를 적용하고, Full-Width로 멋지게.
    • 부서 소개 / 국원 소개를 나눌 필요가 없다. 적당한 박스형 레이아웃으로. 국원 사진도 좀 넣자.
  • 라디오방송 관련 정보 추가
    • 라디오방송 청취 방법(+캠퍼스 스피커 지도)
    • 라디오방송 시간표
    • 음악방송/휴방 기간 안내
  • 철지난 행사 포스터는 내리자
  • ‘행당뉴스 PRIME’ 명칭에 대한 고민
  • 카드뉴스 탑재
    • 관련 플러그인 설치하고, News 섹션 Primary Sidebar 설치
  • 잘못 분류된 ‘학내보도’ 기사들을 ‘생활정보’로 정정
  • 불필요한 페이지 삭제
    • 과거 Legacy 사이트에서 뜯어온 게시판 구현용
CSS 수정
  • 제목(h1~h6) 태그의 줄간격 조정하기 // line-height, 1에서 1.2로 수정
  • 제목(h1~h6) 태그의 폰트 색상, 쌩 블랙이 적당한가? //#222로 수정
  • 본문(p) 태그 색상, Black(#000000)보단 약간 Gray를 찾아보자 // #444로 수정
  • blockquote 개선
  • Mobile : HUBS 로고 삐져나오는 현상 해결
  • Mobile : Genesis Tabs 하단에 공간 많이 남는 문제 해결 (Media Queries 수정)

    CSS tip: To reset a min-height or min-width declaration, set it to “0”, not “auto”. For max-height/width, the initial value is “none”.

  • 문단 좌우정렬, 줄바꿈 기준 변경

    text-align: justify;
    word-break: normal;
    word-wrap: break-word;

  • 메인 화면 Featured Contents 제목 넘칠 경우 Ellipsis(…)으로 처리

    .featured-content .entry-title 클래스 대상
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  • 카테고리 표시, 일자·작성자 표시에 통합
  • 본문(p) 줄간격 1.8로 수정
  • 본문(p)폰트 변경, 자간 좁히기
    • ‘맑은 고딕’, letter-spacing: -0.04em
    • 조선일보 참조 : ‘맑은 고딕’,’Malgun Gothic’,나눔고딕,돋움,Dotum,굴림,Gulim,’Apple SD Gothic Neo’,sans-serif
  • 각 섹션별로 다른 사이트로고 (ex. HUBS NEWS, HUBS TV…)
  • Genesis Tab에 카테고리 표시 : NEWS, TV 등등 // 현재 수정 반영 완료. 옵션 활성화하면 바로 보임
    • Genesis Tab 수정사항 있을 때마다 ‘Show Post Info’에 아래 코드 붙여넣어야 함
      <post_categories sep=&nbsp;&#47; before=&nbsp;>
    • CSS 수정내역
      .home-top .widget.ui-tabs .entry 클래스 대상
      background: rgba( 0, 0, 0, 0.8 );
      font-size: 14px;
      padding: 10px 10px 8px;
      position: absolute;
      z-index: 9;
      right: 0px;
      top: 0px;
      우측 상단에 붙게 됨. 태블릿/모바일 화면은 따로 대책 강구.
  • 본문에 웹사이트 자체링크(WordPress)를 걸었을 경우 생성되는 링크박스 수정
  • Tablet, Phone 해상도에서 Header-Right 위젯 display: none; 처리
PHP 수정
  • Breadcrumb의 ‘YOU ARE HERE’는 필요 없을 듯
  • 페이스북 페이지 위젯은 반응형으로 표시
사이트 레이아웃
  • 컨텐츠 조회 페이지에 대해 Secondary Sidebar 사용 검토.
    • 단, Contents 영역에 대해 가로 50px 늘리고, Primary Sidebar에 대해 50px 줄여주는 조치 필요. Homepage에서 Primary Sidebar가 줄어들어서 생기는 위젯 깨짐도 대응해야 함.
  • 위젯 컨트롤 할 수 있는 방안 마련 Dynamic Widgets 활용
  • Mobile 뷰에서 일정 해상도까지는 Primary/Secondary Sidebar가 각각 가로폭 50% / 50%로 나오게 하는 방안 검토 구현 완료. 적용 대기중
  • Mobile 뷰에서 Primary/Secondary Sidebar 제거 보류

    • 혹은 개개의 div에 대해 선택적으로 제거하는 것도 검토
    • display: none !important;
  • Mobile : 사이트 상단로고 아래 소셜미디어 링크 숨김
  • 게시물 제목은 언론사 웹사이트처럼 Full-Width로 나오는게 덜 답답해보이지 않을까
  • 특정 카테고리의 Archive는 커버이미지가 상단에 나오는게 좋지 않을까 (특히 라디오)
  • 웹사이트 Footer 수정. 한대신문처럼 기능적으로. (로고 + 방송국 정보 + 주요메뉴)
단순 기능추가
  • 특성 이미지가 지정되지 않았을 때 표시되는 기본 이미지가 필요
  • 카드뉴스를 손쉽게 볼 수 있도록 하는 Gallery 기능 필요
  • 관련글 기능 개선
    • 자동선택 알고리즘이 별로다. 차라리 수동지정이 나을 듯.
  • Facebook 위젯 교체. 레이아웃 깨지 않게 반응형으로 교체하거나 이미지로 대체.
  • Secondary Sidebar 상단에 작성자 프로필 사진 표시
    • 뉴스의 경우 담당기자 표시
      • WP User Avatar 플러그인 : <avatar> shortcode 사용
    • TV/라디오의 경우 그냥 Primary Sidebar에 특성이미지 표시하는게 나으려나
      • Featured Image 플러그인 : <Featured Image> shortcode 사용
    • 장기적으로는 제작진 모두 표시할 수 있도록 기능개선 필요
고급 개발과제
  • 게시물 작성/조회시 동일한 CSS 환경에서 볼 수 있어야 함(에디터 CSS 일치)
  • 선곡표의 DB화
  • Noto Sans 웹폰트는 카페24 CDN에 내장 (구글 접속 어려운 환경 감안) // 웹서버 계정에 탑재완료
  • 온라인으로 LIVE 라디오방송을 청취할 수 있어야
  • D3.js를 활용한 실시간 선거정보 페이지 구현
  • 각 방송국원별 Portfolio Page가 있었으면 좋겠다.
  • 메뉴바 : 네이버 모바일 웹처럼 좌우 스크롤 방식으로 전환
참고자료

WordPress PHP 함수 레퍼런스

https://codex.wordpress.org/Function_Reference

image_print