공익 커뮤니케이션을 위한 인터랙티브 모션 포스터 제작 연구: Greenpeace 모션 포스터 중심으로

유엔환경계획(UNEP)이 공개한 ｢Eye on Methane 2024｣인터랙티브 웹페이지는 동적 정보 제시를 통해 메탄 배출이라는 추상적 이슈를 직관적 시각 형식으로 대중에게 제시한다[7]. 페이지는 스크롤 트리거(scroll-triggered) 애니메이션과 데이터 시각화를 결합하여, 사용자가 탐색 과정에서 메탄 배출의 원인·영향·대응 전략을 점진적으로 이해하도록 한다. 이러한 계층적 전개의 정보 구조는 사용자의 몰입감을 높이는 동시에 정보의 논리적 연계성도 강화한다. 공익 이슈의 디지털 표현으로서 본 사례는 동적 효과와 상호작용이 이슈의 이해 가능성과 확산력을 효과적으로 높일 수 있음을 보여주며, 본 연구 작품 디자인의 정보 전환 및 데이터 시각화 기획에 참고가 되었다.

Fig. 1.

UNEP “Eye on Methane 2024” data visualization

Fig. 2.

Tencent charity elephant rescue case CTA page*The figure shows a page presenting a real elephant rescue case and the final CTA interface for user participation

‘텐센트 공익’이 2021년에 공개한 인터랙티브 웹페이지 ｢한 마리 작은 코끼리의 비정상적 죽음｣은 시각적 서사와 인터랙티브 슬라이딩을 결합하여, 사용자가 작은 코끼리가 겪는 이야기를 따라 점진적으로 탐색하도록 안내한다[8]. 해당 사례의 두드러진 특징은 서사적 시각 스타일과 상하 슬라이딩 트리거 논리로, 계층적으로 드러나는 화면과 줄거리를 통해 사용자의 정서적 공감과 사유를 불러일으킨다. 특히 정보 전달 과정에서 상호작용 기제는 사용자가 더 이상 수동적 관람자에 머무르지 않고 손짓 조작을 통해 서사 리듬의 구축에 참여하도록 한다. 실제 사례와 사진의 도입으로 작품은 정보 전달에서 더욱 설득력을 갖추어, 사용자가 인간의 이기심이 코끼리 무리에 가하는 중대한 피해를 깊이 체감하게 한다. 동시에 관람자의 공감을 효과적으로 환기하여 공익 행동에 대한 적극적 참여를 촉진할 수 있다. 말미에는 현재 코끼리 무리의 생존 상황 소개, 실제 촬영 사진과 호소문이 제시되며, 사용자는 터치포인트를 클릭해 코끼리 무리 라이브 방송을 시청할 수 있다. 본 사례는 본 연구 작품의 인터랙티브 트리거 논리와 정서적 시각 스타일 구축에 중요한 참고자료가 되었다.

세 번째 사례에서 본 연구는 한국 디자인팀 Everyday Practice(일상의실천)이 창작한 모션 포스터를 참고 사례로 삼았다[9]. 공익성 프로젝트는 아니지만, 이들의 작품집은 다양한 실험적 동적 표현 형식을 제시한다. 예를 들어, 그래픽의 무작위 이동을 통해 화면의 단조로움을 깨고 시각적 표현에 더 강한 활력과 정보의 입체적 전달을 부여한다. 동시에 모호함에서 선명함으로의 동적 전환은 시각적 리듬과 긴장감을 조성할 뿐 아니라, 관람자의 주의가 점진적으로 핵심 정보에 집중되도록 효과적으로 유도한다. 텍스트의 동적 레이아웃은 이 과정에서 보다 강한 공간감과 호흡감을 드러내어 정보 전달을 한층 매력적으로 만든다. 이러한 경험을 공익 유형 인터랙티브 작품에 적용하면, 해당 팀의 평면 디자인과 동적 효과에 대한 사고를 참고하여 짧은 시간에 관람자의 주의를 끌고 동적 전환을 통해 정보의 입체적 전달을 강화할 수 있다.

Fig. 3.

2022 Seoul Living Design Fair motion poster, four visual states, produced by Everyday Practice*The figure shows four visual states of the 2022 Seoul Living Design Fair motion poster

본 연구는 한국의 대표적 모금기관인 사랑의열매 사회복지공동모금회(Community Chest of Korea) 공식 웹사이트를 중요한 분석 대상으로 삼았다[10]. 연구는 특히 해당 웹사이트의 동적 효과와 사용자 인터랙션 방식을 중점적으로 참고하였다. 사이트는 페이지 전환 시 부드러운 동적 트랜지션과 팝업 디자인을 활용하여 이용자의 탐색 흐름과 정보 접근의 편의성을 효과적으로 향상시켰다.

Fig. 4.

Starting section and popup design of the [Donation] webpage*The figure shows the starting section and popup design of the donation webpage

Fig. 5.

Official signature and representative colors of the Community Chest of Korea*The figure shows the official identity guidelines of the Community Chest of Korea

또한 전체적으로 빨간색을 주조색으로 사용함으로써 기관의 브랜드 아이덴티티와 일관성을 유지하는 동시에, 시각적으로는 ‘따뜻함’과 ‘공익성’의 정서를 전달하였다. 아울러, 이 조직의 상징적 로고와 대표 색상 역시 본 연구의 디자인에 중요한 영감을 제공하였다. 이러한 디자인 기법들은 인터랙티브 모션 포스터 웹페이지 제작에 유의미한 시사점을 제공하며, 결과적으로 작품의 시각적 인지도와 사용자 경험을 공익적 디지털 플랫폼의 실제 활용 맥락에 더욱 가깝게 만드는 데 기여하였다.

앞서 살펴본 네 가지 사례는 각각 국제 공익기구의 동적 웹페이지, 중국 공익 인터랙티브 웹페이지, 한국 디자인 모션 포스터, 그리고 한국 모금기관 웹사이트라는 네 측면에서 동적 효과와 상호작용의 상이한 적용 방식을 보여준다. 이들은 인터랙티브 디자인이 정보 계층화, 정서 유도, 시각적 흡인력에서 갖는 다양한 효과를 공통적으로 드러내며, 본 연구 작품의 디자인 전략에 구체적 시사점을 제공한다.

위 사례들의 본 연구에 대한 의의는 표 2와 같다.

Table 2.

Case analysis and references for this study

본 연구에서 선정한 주제 ｢보이는 것이 전부는 아니다｣는 현대 소비문화와 환경 문제 사이의 모순된 관계에 대한 성찰에서 비롯되었다. 일상에서 소비자는 종종 상품이 제시하는 화려한 외관과 표층적 가치에만 주목하고, 그 이면에서 수반될 수 있는 생태 파괴와 동물 피해는 간과한다. 예컨대 상아 제품, 모피 제품, 사치 장식품은 시각적으로 정교하고 고급스러운 소비 기호로 포장되지만, 그 생산 과정에는 야생동물의 죽음, 서식지 파괴, 생태계 불균형이 뒤따른다. 이러한 ‘시각적 아름다움’과 ‘현실의 폭력’ 사이의 대조가 곧 본 연구가 인터랙티브 디자인을 통해 표현하고자 하는 핵심 주제이다.

또한 디지털 미디어 환경의 확산과 함께 대중의 정보 획득 방식은 점차 신속화·단편화 되는 경향을 보인다. 이러한 배경에서 단일 텍스트나 정적 이미지만으로는 복잡한 환경 이슈를 충분히 전달하기 어렵다. 관람자를 ‘표면적 관찰’에서 ‘깊이 있는 이해’로 유도하기 위해서는 인터랙티브하고 동적인 시각 표현을 활용하여 보여지는 표상 이면에 숨겨진 진실이 점진적으로 드러나도록 할 필요가 있다. 이는 게슈탈트 심리학의 ‘지각 반전’ 및 ‘전경–배경 전환’ 원리와 상통하며, 디자인에 강력한 이론적 근거를 제공한다.

따라서｢보이는 것이 전부는 아니다｣라는 주제는 현실 사회 문제에 대한 응답이자 디지털 미디어 소통 방식에 대한 적응이기도 하다. 이 주제 설정을 통해 본 연구는 인터랙티브 콘텐츠가 숨겨진 정보의 드러남, 대중 인식 전환의 촉진, 공익 이슈의 전달·확산에서 어떤 역할을 수행할 수 있는지 탐구한다.

Greenpeace는 세계에서 가장 대표적인 환경 보호 비정부기구 중 하나로, 해양오염, 야생동물 보호, 기후 위기 등 다양한 환경 이슈에 대한 대중 인식 제고와 이에 상응하는 정책 변화 촉구에 장기간 헌신해 왔다. 그 전달 전략은 국제적 차원에서 뚜렷한 특징을 보여 왔으며, 주로 다음과 같은 측면에서 드러난다.

첫째, Greenpeace는 시각적 충격과 정서 환기를 강조하며, 강렬한 이미지와 짧은 영상 클립을 통해 복잡한 이슈를 직관적이고 강력한 방식으로 대중에게 전달하는 것이 가능하다. 이러한 전달 기법은 본 연구가 인터랙티브 모션 포스터에서 채택한 시지각 심리학(특히 게슈탈트 이론) 방법과 높은 적합성을 보이며, ‘감성적 직관에서 인지적 전환으로’라는 디자인 목표의 실현을 돕는다[11].

Fig. 6.

Introduction page of Greenpeace official website*This is a screenshot of the Greenpeace official website introduction page, displaying the slogan “Positive Change Through Action”

둘째, Greenpeace 공식 홈페이지의 핵심 슬로건 “행동을 통한 긍정적인 변화”에서 알 수 있듯이, 그 커뮤니케이션 이념은 단순히 대중에게 문제를 드러내는 수준에 머물지 않고, 대중의 참여와 행동을 통해 사회적·정책적 변화를 이끌어내는 데 중점을 둔다. 이러한 ‘관찰’에서 ‘참여’로의 경로는 본 연구 인터랙티브 모션 포스터가 추구하는 홍보 목표와 일치한다.

셋째, Greenpeace의 콘텐츠 제작 방식은 디지털 미디어와 소셜 네트워크의 환경에 잘 부합한다. 그 홍보 콘텐츠는 뚜렷한 시각적 표현과 공유하기 쉬운 상호작용 형식을 갖추어, SNS를 통해 빠르고 광범위하게 확산된다. 본 연구의 인터랙티브 웹 포스터 또한 디지털 미디어 활용성이 높은 대중, 특히 공익 이슈에 관심과 열정을 가진 관람자를 주요 대상으로 한다. 여기에는 소셜 미디어에서 적극적으로 활동하며 공유를 즐기는 젊은 세대뿐 아니라, 공익 활동에 지속적으로 꾸준히 관심을 갖고 기부 등 행동으로 참여하는 사회 구성원도 포함된다. 이 점에서 두 사례는 전달 전략과 목표 관람자 차원에서 밀접하게 부합한다.

종합하면, Greenpeace를 본 연구의 가상 협력기구로 설정하는 것은 사례적 포지셔닝과 가치 참조를 제공하며, 동시에 해당 프로젝트가 국제 공익 커뮤니케이션 맥락에서 지니는 실천적 의미와 적용가능성을 부각한다. 따라서 이러한 가상 협력 관계는 타당성을 갖는 것으로 볼 수 있으며, 연구의 현실성과 학술적 설득력을 강화하는 데 기여한다.

핵심 명제 ｢보이는 것이 전부는 아니다｣를 중심으로 본 연구는 네 가지 상이한 주제의 인터랙티브 페이지를 설계하였다. 각 페이지는 게슈탈트 심리학의 원리를 결합해 고유한 시지각·인지 기제를 형성하였다.

앞서 언급한 구조 디자인을 통해 인터랙티브 모션 포스터는 시각적으로 입체적이고 동적인 경험을 형성할 뿐 아니라, 심리적 차원에서 사용자가 “인지–감정–행동”의 완전한 여정을 경험하도록 유도하여 공익 정보의 영향력과 확산 가능성을 높인다.

Table 3.

Visual realization and communicative meaning of four interactive posters based on Gestalt principles

사용자 경험 연구·컨설팅 기관 NN/g(Nielsen Norman Group)의 연구원 Sarah Gibbons의 정리에 따르면, 사용자 여정도(Journey Map) 는 사용자의 목표 달성 과정에서의 행동(Actions) 뿐만 아니라 사고·동기(Mindsets) 와 감정 경험(Emotions) 을 함께 시각화하는 방법이며, 감정 곡선을 통해 경험의 “고점”과 “저점”을 드러내어 디자이너가 최적화 기회(Opportunities) 를 식별하는 데 도움을 준다[12]. 본 연구에서는 이 방법론적 프레임워크가 “주의–감정–행동”의 심리 여정 모델을 설정하는 데 참고하였다.

이 이론을 본 연구의 디자인에 적용하면 “주의–감정–행동” 3단계 모델의 타당성을 보다 명확히 설명할 수 있다: 먼저 시각적 충격으로 주의를 환기하고, 다음으로 감정 곡선의 변동을 통해 공감을 유발하며, 마지막으로 행동 터치포인트(CTA) 를 설정하여 실제 참여로 이어지도록 한다. 이로써 사용자 심리 여정은 단순한 서사 경로가 아니라 인지적 전환을 유도하고 행동을 촉진하는 디자인 프레임워크가 된다.

Fig. 7.

Attention-emotion-action psychological journey model

본 연구의 인터랙티브 웹 포스터는 주로 소재 생성–이미지 가공–상호작용 구현의 세 단계를 거쳤다.

소재 생성 단계에서는 AI 이미지 생성 플랫폼 Recraft를 활용하여 주제에 부합하는 기본 시각 요소를 빠르게 확보하고, 후속 디자인을 위한 창의적 소재를 마련하였다.

이미지 가공 단계에서는 Photoshop을 사용하여 생성 이미지를 2차 편집하고, 세부 수정·색상 조정·텍스트 레이아웃을 통해 전체 화면의 통일성과 미적 완성도를 높였다.

마지막으로 상호작용 구현 단계에서는 Genially 플랫폼을 통해 다중 페이지 구조를 구축하고 인터랙티브 기능을 추가하여, 작품을 정적 화면에서 조작 가능한 인터랙티브 콘텐츠로 전환하였다.

본 연구는 소재 생성·이미지 가공·상호작용 구현을 각각는 Recraft–Photoshop–Genially를 사용하여 구현하였다. 각 도구의 구체적 기능과 적용은 표 4에서 자세히 정리하였다.

Table 4.

Toolchain and production process overview

이 포스터는 ‘사치스러운 외관과 동물 희생의 모순’을 드러내기 위해 여성 숄의 시각적 기호를 활용하였다. 디자인에서는 전경–배경(Figure–Ground) 원리가 적용되었는데, 초기 인식 단계에서 숄은 단순한 패션 액세서리로 보이지만 시각적 전환이 일어나면 곧 여우의 완전한 실루엣으로 드러난다. 관람자는 ‘아름다움’과 ‘잔혹함’ 사이의 시각적 대비를 체험하며 비판적 성찰에 이르게 된다. 이와 같은 표상과 현실의 대비는 동물 보호 문제에 대한 인식을 효과적으로 제고한다.

패션 소비와 동물 생명의 충돌을 주제로 한 이 작품은 규칙적으로 배열된 검은색 가방들 사이에 악어 꼬리가 달린 녹색의 이질적 가방을 삽입하였다. 여기에는 유사성의 법칙(Similarity)이 적용되었으며, 시각적으로 유사한 가방들은 하나의 군집으로 지각되는 반면 상이한 요소는 뚜렷하게 드러난다. 관람자의 시선은 자연스럽게 이질적 대상에 집중되고, 그 결과 사치품 뒤에 감춰진 동물 희생을 연상하게 된다. 작품은 ‘집단과 예외’의 대비를 통해 비판적 메시지를 한층 강화하였다.

Fig. 8.

Application of figure-ground: Perceptual switch between figure and background

Fig. 9.

Application of the law of similarity: Similar elements form a group, while the dissimilar element stands out

Fig. 10.

Application of the law of continuity: Scattered ornaments perceived as a continuous path

이 포스터는 ‘소비 연쇄와 밀렵의 논리’를 시각화하기 위해 목걸이·팔찌 등 상아 장신구를 나선형 경로로 배열하였다. 연속성의 법칙(Continuity)을 활용하여 관람자의 시선은 장신구들이 만들어내는 궤적을 따라 자연스럽게 흐르며, 점차 화면 중앙에 위치한 작은 코끼리 이미지로 수렴된다. 이를 통해 ‘소비–밀렵–죽음’으로 이어지는 인과적 연상 구조가 만들어진다. 연속성에 기반한 시각적 유도는 사치 소비와 야생동물 학살 사이의 잠재적 연결을 효과적으로 드러낸다.

‘바다거북과 플라스틱 오염’을 주제로 한 이 작품은 좋은 형태의 법칙(Law of Prägnanz)을 적용해 설계하였다. 화면에는 바다거북의 전체 윤곽이 제시되지만, 등껍질은 다양한 플라스틱 쓰레기로 채워져 있다. 관람자는 초기 인지 단계에서 이를 안정적이고 완전한 ‘바다거북’으로 인식하지만, 자세히 들여다보면 내부가 오염물질로 구성되어 있음을 알게 된다. 이러한 ‘좋은 형태’에서 ‘실제 오염’으로의 인지적 전환은 해양 생태 위기에 대한 문제의식을 환기한다.

Fig. 11.

Application of the law of prägnanz: Dispersed fragments perceived as a stable whole

Fig. 12.

Static posters on fox fur and crocodile leather bags*This is a pair of static Greenpeace posters: the left critiques fox fur products, while the right reveals the reality of crocodile leather bags.

Fig. 13.

Static posters on ivory jewelry and marine plastic pollution*This is a pair of static Greenpeace posters: the left exposes the ivory jewelry trade, while the right highlights marine plastic pollution affecting sea turtles.

최종 정적 포스터 결과물에서는 Greenpeace의 로고를 삽입하여 공익적 메시지의 현실성을 높이고 신뢰감을 부여하였다. 동시에 각 포스터에는 “이 여성의 숄이 무엇으로 만들어졌는지 궁금하지 않나요?”, “이 장신구들의 끝은 무엇일까요?”, “이 가방에 왜 꼬리가 달려 있을까요?”, “이 거북이의 등껍질이 왜 이런 모습일까요?”와 같은 질문형 카피 문구를 삽입하였다. 이러한 문구는 관람자의 호기심을 자극하고, 단순한 시각적 인지에서 나아가 비판적 사고를 유도함으로써 ‘보기’에서 ‘참여하기’로의 심리적 전환을 이끈다. 로고와 카피의 결합은 포스터의 메시지 전달력을 높이며, 이후의 동적·인터랙티브 구현을 위한 시각적 기반을 마련한다.

Fig. 14.

Mockup of static posters in a street context*This is a mockup image showing Greenpeace static posters applied in an outdoor street context.

사용자는 정적 포스터에 삽입된 QR 코드를 스캔하여 웹페이지에 접속한 뒤, 연구 주제 ｢보이는 것이 전부는 아니다｣(“What You See Is Not Everything”) 가 문자 중심의 핵심 시각 요소로 제시된 화면을 가장 먼저 마주하게 된다. 인지적 집중과 주의 환기를 유도하기 위해 해당 텍스트에는 포커스(Focus) 동적 효과가 적용되었다. 초기 상태에서 글자는 흐림에서 점차 선명해지며, 마우스를 올리면 다시 흐려지고, 치우면 다시 선명해진다. 이러한 상호작용을 통해 사용자는 페이지 진입 시 ‘흐림 → 선명’으로 이어지는 지각적 전환을 경험할 수 있다.

Fig. 15.

Starting screen design of interactive motion poster*This is the starting screen design of the interactive Greenpeace poster, displaying the slogan “What You See Is Not Everything” with animated text effects.

이 효과는 ｢보이는 것이 전부는 아니다｣라는 명제를 강화할 뿐 아니라, 사용자가 눈앞의 정보가 단순한 표상에 불과하며 더 깊은 탐색을 통해서만 그 이면의 실체가 드러난다는 점을 심리적으로 암시한다. 또한 화면에는 가상 협력기구인Greenpeace의 로고가 삽입되었고, 여기에 플리커(Flicker) 동적 효과가 적용되었다. 사용자가 로고를 클릭하면 Greenpeace한국 공식 웹사이트로 연결되며, 프로젝트의 몰입감과 신뢰성을 더욱 높인다.

본 절의 네 가지 주제별 인터랙티브 모션 포스터 가운데 ‘해양 플라스틱 주제’의 동적 구현을 대표 사례로 삼아 상세히 설명한다. 이 주제는 시각 요소와 동적 효과의 결합에서 높은 표현력을 지닐 뿐 아니라, 정적 디자인, 동적 구현, 사용자 심리 경로에 이르는 완전한 논리를 보다 명확하게 보여준다. 나머지 세 가지 주제는 표 형식으로 간략히 정리하여, 각자의 동적 전략, 상호작용 트리거 방식, 핵심 정보 전달 목표를 중심으로 제시한다.

• 해양 플라스틱주제

사용자가 웹페이지에 접속하면, 해양 플라스틱 주제의 동적 인터랙션 페이지는 ‘바다거북과 플라스틱 오염’의 시각적 구성을 중심으로 전개된다. 화면의 주체는 바닷속을 유영하는 바다거북이며, 그 등껍질은 플라스틱 병, 빨대, 비닐봉지 등 다양한 플라스틱 쓰레기로 구성되어 있다. 이러한 요소들은 미세한 흔들림과 부유 효과로 설정되어, 전체 화면이 ‘해양의 흐름’이 재현되는 듯한 실재감을 준다. 바다거북 역시 느리게 몸을 흔들어 수중 유영 착시 효과를 만들어낸다. 이러한 동적 효과는 화면의 몰입감을 높이는 동시에 ‘자연 이미지’와 ‘오염 실태’의 모순적 대비를 부각시킨다.

화면 상단에는 질문형 카피가 한국어로 제시된다: “이런 플라스틱 쓰레기가 바다에서 분해되는 데 몇 년이 걸리는지 아시나요?”. 이 문구는 문제 제기형 표현을 통해 관람자의 인지적 흥미를 자극하고, 시선을 화면 속 플라스틱 조각들로 유도한다.

Fig. 16.

Interactive motion poster page on marine plastic pollution*This is an interactive Greenpeace poster page on marine plastic pollution, where users can click floating items to learn about their decomposition time in the ocean.

상호작용 기제에서 사용자가 특정 플라스틱 쓰레기 이미지 위에 마우스를 올리면, 해당 플라스틱이 해양에서 분해되는예상 기간이 팝업창으로 나타난다. 예컨대 비닐봉지는 약 20–30년이 소요되며, 그 외 플라스틱 쓰레기는 더 오랜 시간이 필요하다. 이러한 데이터는 콜롬비아 대학교 기후 연구소(Columbia Climate School) 가 발표한 해양 플라스틱 오염 관련 과학·교육 자료를 기반으로 하며, 해당 글은 화면 오른쪽 하단의 외부 링크를 삽입하여 사용자가 직접 원문에 접근할 수 있다[13]. 이를 통해 페이지는 단순한 시각·상호작용 경험을 넘어 학습과 정보 습득의 차원까지 확장된다. 관람자는 구체적 수치와 사실적 근거를 통해 환경 문제에 대한 보다 심층적이고 신뢰성 있는 배경지식을 얻게 된다.

Fig. 17.

Tooltip setting and interactive display

이와 같은 직관적 상호작용 설계는 사용자가 추상적 환경 위기를 구체적 수치로 인식하도록 돕고, 해양 오염의 심각성에 대한 이해를 심화시킨다. 동시에 참여 과정에서 점차 정서적 공감과 책임 의식을 고취시키며, 학습과 몰입의 경험을 제공한다.

종합하면, 본 페이지는 동적 효과(부유·흔들림)–정보 트리거(마우스오버 팝업)–외부 링크(추가 학습) 의 삼중 전략을 통해 주의 집중 → 지식 심화로 이어지는 구조를 마련하였다. 관람자는 시각적 충격과 상호작용적 탐색 과정을 거치며 점차 ‘표상–은유–지식’의 인지 경로를 형성하게 된다. 이러한 설계는 연구 주제인 ｢보이는 것이 전부는 아니다｣를 효과적으로 반영할 뿐 아니라, 공익 캠페인의 설득력과 참여도를 높이는 데 기여한다.

• 여우 모피주제

화면의 주체는 여성과 숄로, 처음에는 화려한 장식품처럼 보이나 시각적 전환을 통해 점차 여우의 형상이 드러난다. 상호작용 설계를 통해 ‘우아함’과 ‘잔혹함’의 모순적 긴장을 부각시키며, 클릭 시 팝업창이 열려 모피 산업의 이면을 드러내는 관련 뉴스와 데이터가 제시된다.

Table 5.

Features of interactive fox fur poster

Fig. 18.

Interactive motion poster page on fox fur with pop-up window*This is the interactive poster page on the fox fur issue, showing the main screen and a pop-up window with additional information.

• 악어 가죽가방 주제

화면은 격자 배열된 검은색 가죽 가방들을 배경으로 하며, 유일한 초록색 악어 꼬리 가방이 두드러진 이질적 요소로 나타난다. 마우스를 올리면 미세한 흔들림이 발생하여 심리학적 용어라면 놔두고, 클릭 시 팝업창이 열려 패션 소비와 동물 학대 사이의 모순을 강조하는 내용이 함께 나타난다.

Fig. 19.

Interactive motion poster page on crocodile leather bags with pop-up window*This is the interactive poster page on crocodile leather bags, showing the main screen and a pop-up window with explanatory text.

Table 6.

Features of interactive crocodile leather bag poster

• 상아 장신구 주제

다양한 장신구들이 원형 경로로 배열되어 관람자의 시선이 자연스럽게 중앙의 쓰러진 코끼리로 집중된다. 회전·흐림·흔들림 등 무작위 동적 효과가 화면의 몰입감을 높이며, 팝업 정보는 밀렵으로 인한 죽음과 소비 산업 체인 간의 연결을 보여준다.

Fig. 20.

Interactive poster page on ivory jewelry with pop-up window*This is the interactive poster page on ivory jewelry, showing the main screen and a pop-up window with explanatory text.

Table 7.

Features of interactive ivory jewelry poster

엔딩 화면에서는 먼저 위에서 아래로의 순차적 텍스트 애니메이션을 통해 단계적 시각 리듬을 형성하고, ｢보이는 것이 전부는 아니다｣(“What You See Is Not Everything”) 라는 주제 의식을 강조한다. 텍스트가 점차 완성됨에 따라 관람자의 시선은 화면 중앙의 Greenpeace 로고로 자연스럽게 집중된다.

텍스트 애니메이션이 끝나면, 화면에 손 모양 아이콘이 등장하여 사용자가 Greenpeace 로고를 클릭하도록 유도한다. 이러한 상호작용 설계는 시각적·심리적 차원에서 모두 행동 유도(CTA)의 역할을 수행한다.

Fig. 21.

Ending screen design of interactive poster*This is the ending screen of the interactive Greenpeace poster, guiding users to further campaigns and official channels.

사용자가 Greenpeace 로고를 클릭하면, 공식 후원 페이지(그림 참조)로 직접 연결되며, 해당 페이지에서 정기 또는 일시 후원 금액을 선택하고 결제할 수 있다. 이와 같은 연결은 작품의 상호작용 체계를 넓힐 뿐 아니라 관람자를 단순한 수용자에서 잠재적 공익 활동의 참여 주체로 전환시키는 계기를 마련한다.

이처럼 ‘애니메이션-유도-연결’로 이어지는 완결적 설계를 통해, 결말 화면은 시각적 경험·심리적 공감·현실적 행동을 유기적으로 결합한다. 이는 단순히 전체 상호작용을 마무리하는 데 그치지 않고, 공익 커뮤니케이션의 궁극적 목표인 행동 촉진을 뚜렷하게 부각시킨다.

Fig. 22.

Adaptive layout of interactive poster on different devices (Mockup)*This is a mockup showing the adaptive layout of the interactive poster on different devices. The design adjusts its composition according to the terminal, such as desktop and mobile screens.

본 절에서는 네 가지 인터랙티브 모션 포스터(여우 모피, 악어 가죽 가방, 상아 장신구, 해양 플라스틱)의 설계 요소를 정리하고, 동적 효과·상호작용 방식·외부 연계 측면에서의 공통점과 차이점을 도출한다. 이러한 요소들은 작품의 시각적 표현과 사용자 경험 차원에서의 설계 논리를 드러낼 뿐만 아니라, 후속 전체 작품의 종합 분석 및 연구 의의에 관한 심도 있는 논의를 위한 토대가 된다.

본 테스트에는 총 5명의 참여자를 선정하였으며, 모두 디지털콘텐츠학 관련 전공의 학부생·석사과정·박사과정 학생들로서 디자인과 사용자 경험 두 가지 관점에서 유의미한 의견을 제시할 수 있는 집단이다. 다섯 명의 기본 정보는 다음과 같다: 1996년생 여성(박사과정 재학), 1997년생 여성(박사과정 재학), 1999년생 남성(석사과정 재학), 2000년생 여성(석사 졸업), 2002년생 여성(학부과정 재학). 이들의 학문적 배경과 연구 분야는 본 연구의 주제와 밀접하게 관련되어 있어, 작품의 설계 논리와 상호작용 방식을 정확히 이해할 수 있다.

테스트 과정에서 각 참여자는 PC 환경과 모바일 환경에서 인터랙티브 모션 포스터의 모든 기능을 직접 체험하였다. 이러한 크로스디바이스 비교를 통해 서로 다른 기기에서의 적응형 레이아웃 효과를 검증하고, 다양한 화면 크기에서의 상호작용 방식·정보 제시·시각적 효과를 자세히 분석할 수 있었다. 참여자들은 체험 과정에서 클릭·마우스오버·팝업 열람 등 지정된 상호작용을 수행하였으며, 동시에 사용성·정보 전달력·상호작용 경험·시각적 효과·전반적 인상 및 개선점에 관한 다섯 가지 핵심 질문에 응답하였다.

본 연구의 5×5 사용성 테스트는 다섯 가지 핵심 질문을 중심으로 진행되었다. 첫째, 포스터의 조작 방식(클릭·마우스오버) 이 직관적으로 이해되었는지 확인하였다. 둘째, 각 주제(여우 모피, 악어 가죽 가방, 상아 장신구, 해양 플라스틱)의 환경 메시지가 명확하게 전달되었는지를 살펴보았다. 셋째, 애니메이션·툴팁(Tooltip)·팝업창 등 상호작용 요소가 참여감을 높이는 데 기여했는지를 평가하였다. 넷째, 이미지·애니메이션·레이아웃 등 시각적 요소가 주제 집중도를 강화했는지를 검토하였다. 마지막으로, 전반적 인상과 함께 개선이 필요한 부분에 대한 의견을 수집하였다.

테스트 결과는 정리하여 표 9에 제시하였다. 이 표는 다섯 명의 서로 다른 배경을 가진 참여자들이 사용성·정보 전달력·상호작용 경험·시각적 효과·종합적 인상의 다섯 측면에서 보인 반응을 직관적으로 보여 줄 뿐만 아니라, 크로스디바이스 체험 과정에서 드러난 공통된 문제와 개별 차이도 함께 나타난다. 이러한 데이터는 추가 분석과 개선 방향 수립을 위한 기초 자료가 된다.

Table 9.

Summary of professional user test results

일반 사용자 테스트에는 총 5명의 참여자를 선정하였다. 기본 정보는 다음과 같다: 1970년생 여성(유아교사), 1969년생 남성(고등학교 물리교사), 1995년생 여성(프리랜서), 1998년생 여성(직업 화가), 1995년생 남성(IT 업계 프로그래머). 이들은 전문적으로 훈련된 디자이너나 연구자는 아니지만, 일상에서 디지털 미디어를 자주 접하는 일반 사용자로서 실제 수용자 관점에 가까운 의견을 제시할 수 있다.테스트에서 사용된 질문과 방식은 앞서의 전문 사용자 테스트와 동일하게 적용되었다.

테스트 결과는 정리하여 표 10에 제시하였다.

Table 10.

Summary of general user test results

피드백 내용을 살펴보면, 전문 사용자는 디자인 논리와 연구적 배경에 기반하여 정보의 계층성, 데이터 보완, 모바일 환경 최적화 등 보다 체계적인 개선점을 제시하였다. 반면 일반 사용자는 직관적 경험에 주목하여 시각적 충격, 애니메이션의 흡인력, 상호작용의 이해 용이성 등을 강조하였다.

또한 연령대에 따른 차이도 뚜렷하게 나타났다. 고연령 사용자는 텍스트가 밀집된 정보나 복잡한 내용을 읽는 데 어려움을 겪었으며, 이에 따라 글자의 가독성, 도표의 직관성, 데이터 제시의 명확화를 요구하였다. 반면 젊은 사용자는 인터페이스의 유연성과 전반적 미적 완성도를 더 중시하였다.

따라서 인터랙티브 모션 포스터는 후속 디자인 최적화 과정에서 기기 간 적응성과 데이터 지원을 강화하는 동시에, 특히 연령대별 사용자 요구를 반영하여 글자 크기와 레이아웃 구성 등을 조정하는 차별화된 전략을 적용할 필요가 있음을 확인할 수 있었다.