코드 및 디자인 레퍼런스


  • YT2Vid
    YT2Vid
    미분류@468.201102

    테스트를 위한 유튜브 콘텐츠입니다.

  • YT1Vid
    YT1Vid
    미분류@467.201102

    테스트를 위한 유튜브 콘텐츠입니다.

  • 포스트 메타로부터 유튜브 동영상 추출
    포스트 메타로부터 유튜브 동영상 추출
    노트@464.201102
    function onPlayerReady(event) {
     $("ul#vidlist li").click(function(){
      $('ul#vidlist li.active').removeClass('active');
      $(this).addClass('active');
      var ytid = $(this).data('ytid');
      player.loadVideoById(ytid);
     });
    }
    function onPlayerStateChange(event) {
     if (event.data == YT.PlayerState.ENDED) {
      alert('이벤트 트리거');
      $('ul#vidlist li.active + li').trigger('click');
     }
    }

    포스트 메타 유튜브 추출

    개별 포스트 메타에 속해 있는 유튜브 영상을 추출 및 취합하여 하나의 플레이어와 플레이리스트로 출력합니다.

    구글 ‘자동재생’ 정책 변경

    2018년 4월 발표한 구글 정책 변경에 따라 페이지 진입시 첫 번째 플레이어의 ‘자동재생’은 음소거 상태에서만 실행 될 수 있습니다.

    플레이리스트의 ‘자동재생’

    첫 번째 플레이어 영상 재생 종료 시 트리거 이벤트를 발생시켜 플레이리스트의 다음 재생 정보를 불러와 ‘자동재생’을 실행 합니다. 이는 구글 ‘자동재생’ 정책의 영향을 받지 않습니다.

    [포스트 메타… 추출] 의미와 활용

    유튜브 서비스내에서 플레이리스트를 생성하여 외부 사이트에 임베드 형식으로 추가하는 것과는 다른 개념입니다. 개별 영상 또는 포스트 메타에 속해있는 영상을 사이트 내부에서 추출 및 취합하고 플레이 하는 방식입니다. 이로 인해 영상 서비스에 대한 트래픽 비용 절감 및 다양한 미디어 관련 로직에 활용 될 수 있습니다.

  • CRUD가 필요한 이유와 워드프레스 Front-end에서의 기능 구현
    CRUD가 필요한 이유와 워드프레스 Front-end에서의 기능 구현
    미분류@461.201101

    CRUD 란?

    CRUD란 Creat, Read, Update, Delete의 약자로 흔히 알고있는 커뮤니티 또는 게시판의  쓰기, 읽기, 편집, 삭제 기능을 말합니다. 일반적으로 콘텐츠를 생성하고 관리하는 서비스에 가장 필수적이고 핵심적인 기능 중 하나라고 할 수 있습니다.

    워드프레스 CRUD

    워드프레스와 같은 CMS는 기본적으로 관리자단에 내장되어 있지만 관리자이외의 사용자 혹은 회원에게 관리자단 접근을 차단하고 CRUD 권한을 부여하기 위해선 회원 규칙과 보안 그리고 Front-end(사용자가 사이트에 접속시 보이는 화면)단에서 CRUD 기능을 만들어야 합니다.

    Front-end CRUD 구현

    잔프레스에서는 일반적인 게시판부터 특정 서비스의 포맷에 맞는 CRUD 기능을 워드프레스 사이트  Front-end단에 구현합니다. 구현시 기능 목적에 따라 별도의 플러그인 의존성을 갖기도 합니다.

  • 쇼핑몰 : 우커머스, 워드프레스 쇼핑몰
    쇼핑몰 : 우커머스, 워드프레스 쇼핑몰
    미분류@383.201030

    우커머스 란?

    우커머스는 플러그인 형태로 워드프레스로 구축된 웹사이트에 온라인 쇼핑몰 기능을 구현하는 전자상거래플랫폼입니다.

    글로벌 레퍼런스와 확장성

    다양한 확장 플러그인으로 빠르게 나만의 독립 쇼핑몰을 만들수 있으며, 디지털 다운로드, 의류, 샵인샵 형태로도 발전시킬 수 있습니다. 전 세계인을 대상으로 온라인 판매를 하거나 자체 콘텐츠 또는 제 2의 서비스와 연계하여 운영할 경우에 유용합니다.

  • 부족한 서버 용량을 해결할 저비용 스토리지 AWS S3 연동
    부족한 서버 용량을 해결할 저비용 스토리지 AWS S3 연동
    미분류@374.201030
  • 고효율의 성능을 자랑하는 OpenLiteSpeed 웹서버 구축 AWS + WordPress
    고효율의 성능을 자랑하는 OpenLiteSpeed 웹서버 구축 AWS + Wo…
    미분류@371.201030

    OpenLiteSpeed 란?

    OpenLiteSpeed는 전통적인 Apache 웹서버 인프라에서 벗어나 대량의 트래픽과 성능을 목표로 만들어진 차세대 웹서버 중 하나입니다.

    OpenLiteSpeed의 특징과 안정성

    웹서버 필요한 모듈 업데이트 및 기능 확장 그리고 SSL보안까지 쉽게 관리할 수 있도록 별도의 대시보드 판넬을 지원하는게 특징입니다.

    WordPress 구동

    WordPress 구동을 위해 사용시 타 웹서버 엔진과 비교하여 높은 자원 효율성과 성능을 자랑합니다.

  • 대량 트래픽을 위한 Nginx 웹서버 구축 AWS + WordPress
    대량 트래픽을 위한 Nginx 웹서버 구축 AWS + WordPress
    미분류@370.201030

    Nginx 란?

    Nginx는 전통적인 Apache 웹서버 인프라에서 벗어나 대량의 트래픽과 성능을 목표로 만들어진 차세대 웹서버 중 하나입니다.

    Nginx의 특징과 안정성

    차세대 웹서버 중 가장 인기있는 웹서버라고 부를수 있으며, 그만큼 관련 레퍼런스와 안정성이 확보 되어있습니다.

    WordPress 구동

    단순 비교시 일반적인 상황(Apache 기본 설정) 에서 보다  빠른 웹동작 속도를 체감할 수 있습니다.

  • Morvel 5G
    Morvel 5G
    프로젝트@364.201030

    네트워크 슬라이싱 기반 수직 애플리케이션 생태계를 가능하게하는 5G 이동 통신사 및 기업용 플랫폼을 소개하는 홈페이지입니다. 원페이지 구성과 반응형웹으로 구성되었습니다.

  • 스튜디오 레거시
    스튜디오 레거시
    프로젝트@259.200812

    잔프레스 이전 웹사이트의 테마입니다. 프로젝트 이미지와 소개에 중점을 두어 블랙앤화이트 두가지 색상만을 사용하고 원페이지와 갤러리 형태로 구성되었습니다.



  • 월드컬처오픈 Better World Together
    월드컬처오픈 Better World Together
    프로젝트@174.200517

    Better World Together는 전세계 문화를 교류하고 각 지역의 유용한 정보를 공유하고 캠페인을 모집하는 플랫폼입니다. 구글맵 API를 사용한 위치기반 서비스로 밀집지역은 클러스터를 사용하여 카운트로 처리 되어지고 개별 상세페이지는 마커와 연동되어집니다. 또한 사용자는 자신만의 포스트를 작성하고 계정을 관리할 수 있는 맴버쉽 서비스를 제공합니다.

  • 에덴체인
    에덴체인
    프로젝트@171.200517

    에덴체인(EdenChain)은 기업을 대상으로 설계된 블록체인 기술입니다. 빠르고 안전하며 신뢰할 수 있는 3세대 블록체인 플랫폼으로써 기술과 관련 서비스에 대한 설명을 주로 다루었으며 직관적인 정보 전달을 위한 아이콘 디자인, 기술적 상징성을 표현할 수 있는 그래픽 디자인 그리고 모바일에 대응하는 반응형 웹으로 제작되었습니다.