← 작업 목록

기술 설명 영상 4종

디스플레이 구조·원리

사용 도구·기술
HTML / CSS / JavaScript, Python, Node.js, FFmpeg
시기
2026.10–11
분류
행사와 전시 영상

프로젝트 소개

CO-SHOW 차세대디스플레이 콘텐츠를 위해 CRT·PDP·LCD·OLED의 구조와 발광 원리를 설명하는 영상 네 편을 제작하였습니다.

구성과 의도

CO-SHOW 차세대디스플레이 콘텐츠를 위한 기술 설명 영상 네 편을 제작하였습니다. CRT와 PDP, LCD, OLED에서 빛과 색이 만들어지는 과정을 살펴볼 수 있도록, 각 기술이 등장한 배경과 내부 구조, 발광 원리를 순서대로 구성하였습니다.

실사 화면 위에 도해와 자막을 배치하여 설명하는 부품과 작동 과정을 함께 볼 수 있도록 하였습니다. 화면 상단에는 현재 단계를 표시하고, 마지막 OLED 편에서는 네 기술을 나란히 비교하여 구조와 표현 방식의 차이를 살펴볼 수 있도록 구성하였습니다.

02 / PROCESS

구성과 제작 과정

01

기술 설명의 진행 순서

각 기술에 관한 질문으로 시작하여 등장 배경과 내부 구조, 발광 원리를 순서대로 살펴볼 수 있도록 구성하였습니다.

02

설명 단계와 기술 비교

화면 상단에 단계 표시줄을 배치하고 실사 위에 도해와 자막을 구성하였습니다. 마지막 OLED 편에서는 네 기술을 나란히 비교하여 구조와 표현 방식의 차이를 살펴볼 수 있도록 하였습니다.

03 / MAKING

기획과 구현

기획 의도

CRT·PDP·LCD·OLED의 내부 구조와 발광 원리를 단계별로 살펴볼 수 있도록 구성하였습니다. 같은 설명 화면을 자동재생 영상과 터치형 HTML로 제공하도록 하였습니다.

구현 방식

공통 HTML에 장면과 단계, 재생 시간 데이터를 연결하고 Python에서 도식과 자막을 정리하였습니다. Node.js 스크립트로 자동재생 화면을 영상으로 출력하고, 마지막에는 네 가지 디스플레이의 두께·무게·구성을 비교하는 화면을 연결하였습니다.

  1. 공통 페이지에 장면과 단계 연결

    CRT의 기준 페이지를 바탕으로 PDP·LCD·OLED의 장면, 단계와 길이를 교체하였습니다. 같은 내용을 자동재생 영상과 한 파일로 실행하는 터치형 HTML에 적용하였습니다.

  2. 도식 위치와 생성 영상의 전환 수정

    자막 영역을 정리한 뒤 위쪽에 남아 있던 도식을 설명 영역의 가운데로 옮겼습니다. PDP의 생성 영상에서 확인한 깜빡임과 갑작스러운 유리판 전환은 1.4초 디졸브로 조정하였습니다.

  3. 그림 비율과 전시 명칭 통일

    그림을 가로로 늘이지 않고 비율을 유지하여 넓은 화면에 배치하였습니다. 분해 전시 자료와 부품 이름을 맞추고, 마지막 비교 화면에는 네 열의 막대와 수치를 함께 표시하였습니다.