메가공무원 컴포넌트 가이드

EFFECT

특수 효과

메가공무원 사이트의 여러 홍보 페이지에서 사용된 특수 효과 요소입니다.
주로 CSS 애니메이션 혹은 JS 스크립트로 제작되며 사용자가 페이지에 매력을 느끼고 응집력 있는 시각적 경험을 가지게 합니다.
단, 광과민증을 유발할 수 있는 CSS 애니메이션 혹은 페이지 로드에 부담을 줄 수 있는 과도한 특수 효과의 경우에는 사용에 주의를 요합니다.

메가패스 - 벚꽃

: WE MAKE IT은 여러분의 합격을 위해 준비한 이번 시즌 캐치프레이즈입니다.

다시 찾아 오는 봄, 여러분의 봄은 어떤가요?

단 한 줄의 글로
가장 기억에 남는 봄이나
WE MAKE IT(합격)에 대해 이야기해주세요.

이벤트에 참여하는 모든 사람에게
메가패스 MAKE IT 15% 쿠폰이 제공됩니다!

★ ★ ★ 2023.03.07(화) ~ 2023.03.13(월) ★ ★ ★

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
해당 기능을 사용하여 봄철 벚꽃이 휘날리는 느낌을 나타낼 수 있습니다.

EXAMPLE

#봄
#벚꽃
#메가패스

그래프 상승

합격할 확률 UP

다시 재생하기

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
해당 기능을 사용하여 그래프가 상승하는 느낌을 나타낼 수 있습니다.

EXAMPLE

#그래프
#상승
#위로

타이핑 효과

2023-2024 대비 9급 합격전략 설명회

You’re right.

.

여러분이 옳았습니다.

다시 재생하기

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
해당 기능을 사용하여 텍스트가 실시간으로 타이핑되는 느낌을 나타낼 수 있습니다.

EXAMPLE

#타이핑
#텍스트
#글자

타이머-숫자

60초

두문제의 정답은 3,4번 입니다. 시간안에 문제를 모두 풀이하셨나요? 두문제 모두 정답을 맞추셨나요?

다시 재생하기

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
특정하게 정해진 시간이 자동으로 카운트다운 되며, 카운트가 종료 되었을 때에 특정 이미지 및 정보를 제공할 수 있습니다.

EXAMPLE

#카운트다운
#시간재기
#숫자감소

타이머-시간재기

여러분은 아래 지문을 읽고, 문제를 푸는 데 얼마나 걸리시나요?

00:00 START STOP

정답 ④번, 시간이 흐를수록 품질이 개선되는 것은
일부 고급 적포도주를 병에 담아 코르크 마개를 끼워 보관한 경우에 한정된 이야기입니다.

단 한 문제 푸는 시간 5분 24초 걸렸습니다.

공무원 국어, 이제 정확성과 속도 두 가지가 모두 필요합니다.
빠르고 정확한 국어
메가공무원이 치밀하고 단단하게 준비했습니다.

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
START 버튼을 클릭할 경우, 해당 시점을 기점으로 STOP 버튼을 누를 때까지의 경과 시간이 기록되며
이를 통하여 문제풀이에 소모된 시간을 직관적으로 확인할 수 있습니다.

EXAMPLE

#스톱워치
#시간재기
#시작버튼

타이머-원형

남은 시간

정답 확인

* 황선호의 고품격1004제 문제풀이 문항 발췌

시험은 결국 문제를 풀고 정답을 찾는 싸움! 합격을 위해선 머릿속의 이론을 활용하여 문제를 정확하고, 빠르게 풀 줄 알아야 합니다.

다시 재생하기

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
정해진 시간이 카운트다운 되는 것과 동시에 원형의 색상 바 역시 줄어들며 시간의 경과를 사용자에게 전달합니다.
이를 통하여 문제풀이에 소모된 시간을 직관적으로 확인할 수 있습니다.

EXAMPLE

#카운트다운
#시간재기
#애니메이션

말풍선

다시 재생하기

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
특정 이미지들의 크기가 순차적으로 Scale(0.1, 0.1)에서 Scale(1, 1)으로 변화하면서 말풍선이 나타나는 느낌을 줄 수 있습니다.

EXAMPLE

#페이드인
#나타나기
#순차적

순서대로 깜박임

1회독TM(Teacher’s Map) : 키워드 중심으로 개념과 용어 요약 · 정리
2회독이론설명(강의 + PPT)
3회독예제/확인문제/실전훈련문제 : 배운 이론 바로 적용
4회독오쌤Talk : 강의에서의 쉬운 설명을 보며 배운 내용 다시 점검

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
3초 간격으로 위에서부터 아래(순서대로)를 향해, 박스의 Border에 깜박이는 것과 같은 강조효과가 들어갑니다.

EXAMPLE

#순서대로
#강조효과
#깜박임

숫자 상승 효과

%^*

다시 재생하기

메가공무원 이벤트 페이지에서 사용되는 CSS 애니메이션 효과 기능입니다.
0에서부터 지정된 특정 숫자까지 수치가 증가하는 느낌을 줄 수 있습니다.

EXAMPLE

#숫자상승
#카운트
#수치증가

메인 영상&비쥬얼 전환 - 비디오 태그 사용

* 2022/04/12 YES24 공무원 전체 베스트셀러 1위 기록 기준
** 2012/4~2023/4월 행정학/지방자치론 신용한 교재 출고부수(판매용+증정용+비매품 출고포함)

H

메가공무원 이벤트 페이지에서 사용되는 영상 효과입니다.
영상이 끝나는 시점에 메인 비쥬얼이 등장합니다.
모바일 기기에서는 음소거를 설정하면 자동재생이 되긴 하지만,
모바일 iOS 특정 버전에서는 초기 로드 시 비디오 태그의 기능들을 제대로 실행시키지 못하는 버그가 있습니다.
그러므로 기기별 크로스 브라우징을 고려하여 PC 이외의 기기에서는 영상 없이 바로 메인 비쥬얼이 노출됩니다.

EXAMPLE

#영상제어
#비디오태그
#텍스트효과
#iOS버그

메인 영상 비쥬얼

신청 바로가기

전체화면으로 보기

메가공무원 이벤트 페이지에서 사용되는 메인 영상입니다.
모바일 기기에서는 음소거를 설정하면 자동재생이 되긴 하지만,
모바일 iOS에서는 절전 모드에서 플레이가 안되는 현상이 있습니다.
절전모드는 고려 대상이 아니므로 음소거 자동재생으로 메인 영상처리를 합니다.

- iOS 절전모드에서 비디오 태그 플레이 안되는 현상 보기

EXAMPLE