이런 자료는 도움이 될 수 있을까?
안녕하세요 3주가 되어 돌아왔습니다.(3주가 되어서 돌아왔어야하는데 에휴.. 완전까먹어버리고 급하게 월요일날 쓰는 중입니다.)
이미 일어난 일이니 어쩔 수 없습니다. 정말 이번 2025년도 3,4,5월은 정말 인생에 이만큼 일이 많았던적이 처음이였던거 같아요.
그래도 이제 6,7월부터는 천천히 원래 페이스대로 돌아올꺼같습니다. 다시 학습도 충실히하고 회사생활도 하고 해서 원래 궤도로 돌려놔야 할꺼같습니다.
쨋든 서두가 길었습니다. 이번주도 정말 바빳던 관계로 또 '이런 자료는 도움이 될 수 있을까?' 를 포스팅 하려고합니다. 여러분에게도 도움이 되고 저도 자료를 가져와서 번역만해도 되니까 정말 1석2조가 아닌가 싶습니다. 그래도 이젠 ai도 하고 다시 언리얼도 조금씩해야겠죠?
몇개월만 더 봐주시길 바랍니다. 쨋든 시작하겠습니다.
자료는 이 사이트에서 본 글을 번역해서 소개해드리겠습니다.(중국사이트인데 이게 목록도 잘 안보이고 자꾸 뭘 설치하라고해서... 당황스럽긴 합니다.)
https://mp.weixin.qq.com/mp/wappoc_appmsgcaptcha?poc_token=HCmDPWijYRBWvSTafPpqJuITsIbJJ5XArcwczegK&target_url=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI0OTY2NzUxMg%253D%253D%26chksm%3De98ccd65defb44733d3addbcb2ee2aa06862fc05eabd902bd8a6ef98785bc0954bcc5412e161%26cur_album_id%3D1786583808784269312%26idx%3D1%26mid%3D2247518130%26scene%3D189%26sn%3D9dfc77326e0a899a450d89a13e58a483
环境异常 当前环境异常，完成验证后即可继续访问。
mp.weixin.qq.com
너는 보통 어떤 계기로 "이 부분엔 모션이 필요하겠다"는 생각을 하게 돼?
당연히 기본적으로는, 원래부터 모션 디자인이 들어가야 하는 구간들이 있어. 하지만 그 외에도 게임 UI 안에는 훨씬 더 많은 일체형 경험이 존재해. 이런 부분들은 전체적인 사용 흐름을 종합적으로 고려해서 모션을 넣어야 해.
우리는 이런 걸 오늘 이렇게 표현해볼게 "모션으로 해결해야 하는 문제들"이라고. 이런 문제들은 대부분 눈에 딱 띄는 형태는 아니고, 거기서 모션이 해주는 역할도 아주 미묘하고 은근해.
🔍 오늘의 개념 정리!
일체형 경험이라는 건 전체적인 흐름과 연결된 사고방식이야. 단순히 “여기 어떤 애니메이션을 넣을까?”를 생각하는 게 아니라, 플레이어가 어떤 전반적인 경험을 받아야 할지, 어디에 모션이 꼭 필요하고, 어디는 굳이 없어도 되는지를 종합적으로 설계 관점에서 고민하는 것을 뜻해 그럼 이제 이런 문제들이 실제로 나타나는 몇 가지 상황을 살펴보자.
📌 P1 – 시각적으로 그리 강하지 않지만, 어느 정도 눈에 띄어야 하는 경우
이런 경우는 꽤 자주 생겨. 이유는 다양해. 어떤 건 디자인에서 미처 고려하지 못한 거고, 어떤 건 애초에 디자인 스타일 자체가 그렇게 정해져 있는 경우도 있지. 근데 어쨌든, 시각적으로는 더 이상 아이디어가 안 떠오를 만큼 디자이너가 머리 싸매고 고민해도 답이 안 나오는 상황이야. 그래서 전체적인 조작 효과를 봤을 때, 아주 약간의 모션만 추가해줘도 문제가 깔끔하게 해결되는 거지. 이런 경우의 핵심 원리는 바로 "정적인 화면 속에서의 움직임"이야. 즉, ‘정중동(靜中動)’이라는 개념이지. 이 상황에서 등장하는 요소들은 강하게 튀어나오면 안 되고, 그렇다고 완전히 묻혀도 안 되는 미묘한 위치에 있어. 특히 자주 있는 패턴은, 큰 프레임 안에 작은 컨트롤러가 들어가 있는 구조인데, 이럴 때는 2D 평면적인 시각 설계만으론 강약 차이를 충분히 만들어내기 어려워. 그래서 이럴 땐 ‘시간’이라는 차원, 즉 모션을 더해서 해결책을 만들어야 해. 아래 그림에서처럼 말이지.
이런 식으로 한번 가정해보자. 지금 보고 있는 이 카드가 실제 상황에서는 단독으로 존재하지 않고, UI의 다른 요소들과 기능적으로 연결된 구조라고 해보자. 이 카드 위에는 여러 가지 복잡한 이유로 인해, 가로 방향의 태그(라벨) 하나가 붙어 있어. 근데 또 이 태그의 스타일은 너무 눈에 띄면 안 돼 튀지 않아야 해. 그럼에도 불구하고 유저가 반드시 인지할 수 있어야 하는 요소이기도 하지.
자, 이런 상황에서 정적인 시각 디자인만 가지고는 이 미묘한 니즈를 만족시킬 더 나은 해결책이 잘 떠오르지 않아. 그런데 말이지, 아주 살짝만 모션을 넣어주면 이 문제는 정말 기가 막히게 해결돼.
이런 식의 상황에서, 태그는 대부분의 경우 여전히 그다지 눈에 띄진 않아. 그치만, 그래픽 변화나 순환하는 광선 효과 같은 아주 작은 모션을 주기적으로 넣어주면, 유저에게 슬쩍슬쩍 시선을 던지게 만들 수 있어. 즉, 지나치게 튀지도 않으면서, 주목성은 유지된다는 거야. 그렇게 되면 이 문제는 자연스럽게 해결되는 셈이지.
📌 P2 - 보기에는 '뭔가 움직여야 할 것 같은' 구간
이건 언뜻 들으면 그냥 당연한 말처럼 보이지만, 실제로는 이런 "움직임이 필요해 보이는" 지점에서의 디테일한 모션 처리가 전체 경험에 큰 차이를 만들어내는 경우가 많아. 몇 가지 예시를 보면서 얘기해보자. 첫 번째는 《元梦之星(몽환별의 꿈)》의 이미지야.
여러 개의 팝업창이 연속해서 뜨는데, 전부 그냥 단일 이미지일 뿐, 딱히 동적인 장식도 없어. 이건 《元梦之星(몽환별의 꿈)》안에서 보여주는
수많은 섬세한 연출들과 너무 극명한 대조를 이뤄, 결국 이미지의 상업적 분위기도 전혀 살리지 못했지. 두 번째 사례는 《콜 오브 듀티 모바일》의 팝업이야 — (여기서는 속도 조절을 조금 해놨어):
이건 유료 스킨 세트의 팝업이야. 오른쪽 위에 닫기 버튼 하나 빼고는, 이게 팝업인지조차 알아채기 어려울 정도지. 실제로 이 팝업 안의 콘텐츠들은 최대한 애니메이션으로 표현되고, 시작할 때 꽤 긴 프롤로그 연출도 있어서 연출의 밀도나 임팩트가 엄청나. 《CODM(Call of Duty Mobile)》은 유료 콘텐츠에서 연출에 돈을 아끼지 않는 걸로 유명해. 이건 PC판의 스타일과도 좀 닮았다고 볼 수 있는데, 전반적으로 과감한 액션 스타일의 모션을 많이 쓰는 편이야. 거칠다고 볼 수도 있지만, 카메라 전환, 분위기 연출, 시각 효과 같은 건 오히려 굉장히 정교하게 다듬는 타입이지. 이건 일종의 극단적인 사례라 할 수 있고, “움직일 수 있으면 다 움직여라”는 철학이 느껴지는 대표적인 예야. 다만 일반적인 사례는 아래처럼 조금 다른 방식을 취해.
세 번째 예시는, 감각적인 연출로 잘 알려진 《重返未来1999(리턴 투 퓨처 1999)》의 사례인데, 이쪽은 훨씬 더 디테일한 모션 처리에 집중하는 스타일이야
보통은 그냥 정적인 장식 요소로 처리됐을 법한 것들도, 《重返未来1999(리턴 투 퓨처 1999)》에서는 천천히 움직이는 정지 애니메이션을 넣어서 화면 전체에 미묘한 생동감을 불어넣어. 이런 식의 처리는 자칫 단조롭게 느껴질 수 있는 구간에서도 사용자의 시선을 자연스럽게 머무르게 하고, 게임의 분위기나 감성을 부드럽게 끌어올려 주는 역할을 해. 크게 튀지 않지만, 전체적인 완성도를 한 단계 높이는 디테일이지.
어떤 부분은 아예 자동 스크롤(자동 슬라이드) 효과까지 넣어놨어. 이런 자동 움직임은 화면에 변화감을 주면서도, 유저가 특별히 조작하지 않아도 자연스럽게 콘텐츠가 노출되도록 도와주지. 자동 스크롤은 특히 긴 목록이나 반복되는 정보 표시에서 유저의 시선을 끌고 흐름을 유지하는 데 효과적이야.
그리고 필요한 분위기 연출도 해줘. 비록 캐릭터 장식에 2D 애니메이션을 직접 쓰진 않았더라도 말이야. 즉, 직접적인 캐릭터 움직임 없이도 배경이나 주변 요소, 빛 효과, 색감 변화 같은 다양한 분위기 장식 요소들로 충분히 몰입감을 만들어낼 수 있어.
화면 위의 움직임이 아주 섬세하고 미묘한 정도야. 수식용 장면 요소들도 비슷한 톤으로, 빛 효과에 약간의 변화를 줘서 전체 화면이 생동감 있게 느껴지도록 했어. 이 세 가지 예시는 각각 ‘아예 움직이지 않는 극단’, ‘강하게 움직이는 극단’, 그리고 ‘적절하게 움직이는 중간’ 세 가지 상황을 보여줘. 디자이너가 가져야 할 습관은, ‘움직일 것처럼 보이는 요소는 가능한 움직여라’라는 점이야. 이건 상식에 부합해서 사용자 경험을 향상시켜주거든. 하지만 움직임의 강도나 밀도는 실제 필요에 맞춰 조절해야 해, 부분만 생각하지 말고 전체 흐름을 놓치지 않는 게 중요해.
📌 P3 - 공간이 부족한 곳
시각 디자이너가 자주 마주치는 고민, 인터페이스 내 공간 활용이 이미 극한에 달해 더는 넣기 어렵다! 그럴 땐 예전 방식대로, 시간이라는 차원을 더해 해결해야 해. 살아있는 사고 방식으로 문제를 풀고, 간단한 동작 하나만 추가해도 부드럽게 해결될 수 있어. 정적인 면에서 같은 공간에 더 많은 걸 넣는 방법도 많지만, 한계가 있지. 그래서 인터페이스는 ‘살아있는 것’임을 인식하고, 시간의 개념을 더하는 게 문제 해결의 열쇠야. 다시 몇 가지 예시를 볼게.
첫 번째 예시는 《飙酷车神轰鸣盛典》 게임 내 지도 옆 작은 컨트롤러들이야:
이 동작 효과 스타일은 《飙酷车神2》에서 사용한 비슷한 그래픽 애니메이션을 이어가는 거야. 직접 연결되는 형식을 잘 활용해서 다양한 정보 전환을 자연스럽게 이어주는 방식이지. 이 효과는 이 스타일이 디테일 면에서 발전한 거라고 볼 수 있어. 또한, 공간을 절약하는 동적인 방법으로 우리가 흔히 쓰는 ‘서랍(drawer)’ 형태와도 비슷해. 여기 공간이 그렇게 넓은데 왜 이렇게 아끼는 걸까? 사실 전혀 크지 않아. 이건 ‘HUD’라고 불리는 영역으로, 플레이어가 핵심 게임플레이 단계에서 주로 쓰는 인터페이스야. 특히 이런 게임에서 HUD는 최대한 깔끔해야 해. 그래서 지도 옆의 작은 컨트롤 요소에 붙어 있는 비상시 표시 정보도 아무리 작아도 꽉 찬 느낌을 줄 수 있어서, 공간 절약에 특별히 신경 써야 하는 거지. 실제로 대부분 시간 동안 이 부분은 접혀 있어서, 전체 화면이 덜 복잡하고 깔끔해 보이는 거야.
두 번째 예시는 《极限竞速》(Forza Horizon 2023) 게임 내 상점 페이지야: 이 페이지 역시 공간 활용과 정보 전달이 중요해서, 동적인 요소들을 적절히 활용해 시각적 부담을 줄이고, 플레이어가 필요한 정보를 빠르게 파악할 수 있도록 디자인되어 있어. 카드가 선택된 상태에서는 자동으로 떠오르는 텍스트 설명이 나오는데, 이게 바로 앞서 말한 ‘서랍’식 공간 절약 방법이야. 비록 이 게임 인터페이스가 좀 투박하긴 하지만, 이런 방식을 꽤 잘 활용하고 있어. 위 그림에 나온 메인 메뉴에서도 비슷한 스타일이 보이지.
세 번째 예시는 《白荆回廊》의 메인 화면 가로 전환 장면이야. 이 화면 전환은 깔끔하면서도 공간 활용을 효율적으로 하면서 동적인 움직임으로 사용자 경험을 부드럽게 만들어줘.
이런 디자인 의도는 명확히, 뚜렷한 전환 없이 메인 화면에 더 많은 진입점을 배치하려는 목적이야. 마치 스마트폰 바탕화면의 가로 스와이프처럼, 공간을 절약하면서도 사용자 인터랙션에 유리한 고전적인 방식이지. 하지만 지금까지 이 진입점들은 다소 어색하거나 비어 있는 느낌이 있어. 앞으로 충분한 콘텐츠가 채워졌을 때 어떤 모습일지 기대되는 부분이야. 간단한 동적 효과로 공간을 절약하는 건 때로는 극단적인 선택일 수도, 기능적 필요에 따른 선택일 수도 있어. 그냥 형태만을 위해 억지로 동적 효과를 넣으면 오히려 어색해질 때가 많아. 다른 상황들도 있는데, 관심 있으면 나중에 더 이야기해보자고. 우리 함께 디자인의 본질을 찾아가자. 이 글 끝.
여러분들도 가볍게 한번 읽어보시고 참고해서 비슷하게도 한번 만들어보시면 좋을꺼같습니다. 다음에도 좀 도움될만한 내용을 가져와 보도록 하겠습니다. 그럼 앞으로 시작될 엄청난 여름을 다들 잘 견뎌내 봅시다. 그럼 3주뒤에 뵙겠습니다 (꾸벅)