UX/UI 디자인 사례를 참고했었던 라이브 스트리밍 플랫폼 치지직의 웹 화면을 간단하게 분석해 보았다.

-헤더 (header) 웹사이트나 앱의 최상단에 위치한 헤더에는 브랜드 아이덴티티인 치지직 로고가 심플하게 배치되어 있다. 주요 서비스나 카테고리로 이동할 수 있는 링크가 있고 사용자가 원하는 정보를 빠르게 찾을 수 있도록 돕는 검색 바가 있다. 로그인과 같은 사용자의 행동을 유도하는 CTA(Call to Action) 버튼과 사용자의 눈의 피로를 감소시켜주는 다크모드 UI가 배치돼 있다.

-콘텐츠 영역 (contents area)

메인 정보를 전달하는 섹션인 콘텐츠 영역에는 다양한 스트리머들의 방송 화면이 행과 열에 맞게 나열돼 있어 시각적 피로도를 낮추고 가독성과 시각적 흐름을 챙겼다. 실시간 스트리밍 중인 LIVE 표시와 현재 시청자 수가 표시돼 있고 카테고리 별로 스트리머를 대표하는 태그가 표시돼 있다.

-푸터 (footer) 웹사이트의 최하단 영역인 푸터에는 사업자 정보, 법적 고지, 고객 지원 등 법적 의무 정보와 사용자 편의를 위한 링크가 배치되어 있다. 단순히 정보를 나열하는 공간을 넘어, 사용자가 길을 잃었을 때 도움을 주는 정보 안전망이자 브랜드의 신뢰도를 결정짓는 중요한 역할을 한다.

웹 디자인 재현 작업

피그마를 활용해서 직접 웹 디자인을 구현해 간단한 프로토타입을 만들어보려 했는데 레이아웃을 구성하는 요소가 제멋대로 튕겨 나가거나 크기가 조절되지 않는 문제가 생겨서 상당히 애먹었다. 프레임에서 그리드를 생성해 헤더, 컨텐츠, 푸터로 섹션을 나누고 미리 제작한 UI 컴포넌트들을 프레임에 삽입하고 싶었는데 원하는 위치에 적용되지 않았다.

(미리 제작한 UI 컴포넌트를 프레임에 끌어다놓으니 프레임 크기 자체가 줄어들었다)

그래서 그리드를 만들지 않고 기본 프레임에 UI 컴포넌트를 삽입했다. 얼추 모양새라도 최대한 비슷하게 만들고 싶었다.

(솔직히 치지직 디자인은 너무 복잡할 것 같아서 심플한 네이버 소개 디자인으로 도망쳤다.)

이전에는 피그마를 활용해서 간단한 도형 만들기나 텍스트 배치하는 것까지만 해도 문제없이 잘 만들어와서 생각보다 할만하다 라고 생각했었는데 직접 웹 디자인을 참고해서 그대로 따라하는 것만해도 벅차게 느껴졌다. 치지직 웹 디자인을 구현해 보려다가 정말 벽이 느껴져서 훨씬 심플한 네이버 소개 웹 디자인으로 바꿔봤는데도 쉽지 않았다. 앞으로 프로덕트 디자이너 교육 과정에 참가하게 될 예정인데 정말 노력하고 스스로 문제점이 뭔지 계속 생각해야 무언가를 얻어갈 수 있겠다는 생각이 든다.

(출처) https://chzzk.naver.com/ https://www.navercorp.com/ -작가 rawpixel.com, Freepik-

버튼, 카드, 입력 필드 등 웹/앱 화면을 구성하는 재사용 가능한 시각적 및 기능적 단위이다. 여러 가지 핵심 컴포넌트를 활용하여 일관된 디자인과 사용자 경험을 효율적으로 구축할 수 있다.

-인스턴스 (Instance)

인스턴스는 메인 컴포넌트를 복제하여 실제 디자인 화면에 배치한 복사본을 의미한다. 여러 페이지에서 동일한 컴포넌트를 사용하여 디자인 통일성을 확보할 수 있다.

간단하게 UI 컴포넌트 요소 중 하나인 버튼을 여러 개 만들어 보았다.

2. 프로토타이핑 (Prototyping)

프로토타이핑은 최종 제품을 만들기 전, 아이디어를 구체화하고 사용자 흐름을 검증하기 위해 시제품(Prototype)을 제작하는 과정이다. 단순히 어떻게 보이는가를 넘어 어떻게 동작하는가를 테스트하여 개발 전 오류를 줄이고 비용을 절감하는 데 목적이 있다.

좋아하는 캐릭터를 활용해서 간단한 프로토타입을 제작해 보았다. 두 개의 프레임을 만들고, 1번 프레임에서 버튼을 누르면 2번 프레임으로 이동하는 효과를 주었다.

특정 공간 안에 문자, 이미지 등의 구성 요소를 효과적으로 배치하여 정보 전달력과 가독성을 높이는 작업이다. 하지만 공간 안에 모든 요소가 규칙적으로 배치되어 있는 것만으로는 레이아웃이라 칭하기에 부족하고 기본적으로 레이아웃이라 불리기 위한 요소는 아래와 같다.

-가독성 글은 읽기 쉽게, 이미지는 목적에 적합하게 써야 한다.

-명쾌성 사용자가 바로 의도를 알 수 있어야 한다.

-조형성 시각적으로 어떻게 다루어졌는지, 내용이 어떤 느낌으로 와닿는지 명확해야 한다.

타이포그래피(Typography)

글자를 가독성 있고 심미적으로 배열하여 메시지의 감정과 분위기를 효과적으로 전달하는 작업이다. 폰트, 크기, 자간, 행간, 정렬 등을 조절하여 정보의 중요도에 따른 계층 구조를 만들고, 여백을 활용해 시각적 명확성과 일관된 브랜드 이미지를 구축하는 핵심 그래픽 디자인 요소이다.

피그마를 활용해 나만의 타이포그래피를 간단하게 만들어 보았다.

피그마는 UI/UX 디자인 업계에서 활용도가 매우 높은 필수 툴로 자리매김했다. 디자이너와 개발자가 함께 실시간으로 제품 UI를 설계하고 검토할 수 있는 협업 디자인 플랫폼이며 UI/UX 디자인, 인터랙션 디자인, 아이콘 제작 등 다양한 디자인 작업에 활용된다. 또 프로토타입 제작, 피드백 주석, 개발용 코드 추출 등 디자인 이후의 단계까지도 자연스럽게 연결되는 장점이 있다.

-피그마의 장점

1) 협업 기능 여러 사용자가 동시에 같은 파일에서 작업이 가능하다.

2) 버전 관리 자동 저장과 버전 기록을 통해 이전 상태로 쉽게 복구할 수 있다.

3) 플러그인 지원 다양한 플러그인을 통해 워크플로우를 확장할 수 있다.

피그마를 활용한 간단한 도형 만들어보기

사각형, 동그라미 도형을 각각 하나씩 간단하게 만들어봤다. 두 도형에 통일감을 주고 싶어서 그림자 배치나 그라데이션을 똑같이 적용했고 밝은 느낌을 주기 위해서 RGB 색상을 사용했다. 보라색, 파란색과 같은 유사색을 사용해서 부드럽고 차분한 느낌을 전달하고자 했다.

색상의 이론을 배움으로써 색상의 특징과 상호작용을 이해하고 색상환과 RGB, CMYK 모델 등을 활용하여 사용자에게 브랜드나 디자인의 목적에 맞는 감정을 색상을 통해 전달할 수 있다.

1. RGB (Red, Green, Blue)

빛의 3원색인 빨강, 초록, 파랑을 조합하여 다양한 색을 만들고 색상이 더해질수록 밝아지는 가산혼합(Additive Color) 방식이다. 컴퓨터 모니터, 스마트폰, TV와 같은 디지털 디스플레이에서 사용되며 색상 표현 범위가 넓고 화려한 특징이 있다.

2. CMYK (Cyan, Magenta, Yellow, Key/Black)

시안, 마젠타, 노랑, 검정을 조합하여 색을 만들고 색상을 더할수록 어두워지는 감산혼합(Subtractive Color) 방식이다. 포스터, 책, 명함과 같은 인쇄물에 주로 사용되고 RGB보다 표현할 수 있는 색의 범위가 더 좁고 어두운 특징이 있다.

3. 색상환(Color Wheel)

색상환은 색의 관계를 시각적으로 보여주는 원형 다이어그램으로, 보색, 유사색, 삼각색 조합 등 색상 조합을 빠르게 선택하게 해주는 핵심 도구이다.

-보색

서로 정반대편에 마주 보고 있는 색이다. 강한 대비를 주어 특정 요소를 강조하거나 생동감을 줄 때 사용한다. ex) 빨강↔초록, 주황↔파랑, 노랑↔보라

-유사색

바로 옆에 위치한 색이다. 부드럽고 차분한 느낌을 줄 때 사용한다. ex) 빨강-주황, 주황-노랑, 노랑-초록

-삼각색 조합

색상환에서 정삼각형을 이루는 세 가지 색이다. 균형 잡히고 활기찬 분위기를 조성할 때 사용한다. ex) 빨강-파랑-노랑

색상을 이론적으로 공부하며

이제까지 잘 만들어진 제품의 디자인이나 색깔을 보면서 그냥 예쁘네, 보기 좋다 이런 식으로 무의식적으로만 생각했었는데 색상에 대한 이론을 공부하면서 디테일 하나하나에 디자이너의 고뇌가 있겠구나 싶었다. 항상 소비자의 입장이었는데 제품을 직접 디자인하는 생산자의 입장을 어느정도 체감한 것 같다. 내가 디자이너로서 잘해낼 수 있을지 걱정되기도 하지만 이런 식으로 이론을 정리하면서 공부하다 보면 자연스럽게 좋은 디자인을 만들 수 있을 거라 생각한다.

(썸네일 사진 출처) -작가 rawpixel.com, Freepik-

디자인의 기본 원리는 요소를 배치하여 시각적 질서와 미적 조화를 만드는 구조적 계획이며 핵심 원리인 균형, 비례, 강조, 리듬, 통일 등 시각 정보를 구조화하고 메세지를 명확히 전달하여 사용자의 시선을 유도하고 안정감을 제공하기 위해 필수적으로 이해해야 할 요소이다.

1. 균형 (Balance)

디자인의 기초 원리 중 균형은 화면 내의 시각적 요소들을 어느 한쪽에 치우치지 않게 배치하여 시각적 안정감과 조화를 만들어내는 핵심 원리이다. 균형을 적절히 사용하면 사용자가 콘텐츠를 편안하게 인지할 수 있도록 돕고, 디자인의 목적과 메시지를 더욱 명확하게 전달할 수 있다.

-대칭 균형

요소들이 화면의 중심선을 기준으로 좌우나 상하가 거울처럼 동일하게 배치된 형태로, 전통적, 안정적이며 정돈된 느낌을 준다.

-비대칭 균형

요소들이 화면의 중심선을 기준으로 비대칭적이지만 서로 다른 크기나 형태, 색상의 요소들을 배치해 시각적인 무게감을 맞춰 균형을 잡는 방식이다. 역동적이고 현대적이며, 시각적 재미와 긴장감을 유발한다.

-방사형 균형

요소들이 화면의 중심점을 기준으로 원형이나 방사형으로 뻗어 나가는 형태이다. 시선을 자연스럽게 중심점으로 집중되게 한다.

2. 비례 (Proportion)

디자인의 비례는 요소들이 어떻게 서로 관련되어 있는지를 보여주는 원리이다. 크기 차이를 통해 중요한 정보를 강조하거나, 작은 요소들을 조화롭게 배치해 디자인의 흐름을 형성할 수 있다. 비례를 잘 활용하면 사용자의 시선이 자연스럽게 중요한 정보로 이동하도록 유도할 수 있다.

-황금비율

약 1:1.618의 비율로 고대 그리스부터 가장 아름답고 안정적인 비율로 여겨져 왔으며, 조개껍데기, 식물의 잎 배치 등 자연속에서도 흔히 발견된다. 가장 자연스럽고 아름답게 보이는 비례로 알려져 있다.

-인체 비례

인간의 몸을 기준으로 한 비례로, 제품 디자인이나 공간 설계에서 사용 편의성을 결정짓는 핵심 요소이다. 레오나르도 다빈치의 '비트루비우스적 인간'이 인체 비례의 완벽함을 수학적으로 증명한 대표적 사례이다.

3. 강조 (Emphasis)

디자인의 강조는 화면 안에서 가장 중요한 요소를 부각해 시선을 사로잡고, 사용자의 주목을 끄는 기법이다. 모든 요소가 똑같이 중요하다면 사용자에게 혼란을 줄 수 있으므로, 의도적인 차이를 만드는 것이 필요하다. 사용자가 가장 먼저 봐야 할 정보를 명확히 전달하도록 유도할 수 있다.

-크기 차이

중요한 요소를 더 크게 만들어 주목도를 높인다. 단순히 크고 작음을 넘어, 사용자의 시선이 머무는 순서를 결정하고 정보의 중요도를 전달하는 역할을 한다.

-색상 대비

서로 다른 색상을 배치하여 시각적 명확성을 높이고, 특정 정보를 강렬하게 전달하여 사용자의 시선을 끌도록 유도한다.

-위치

요소가 배치되는 공간의 위치를 통해 시각적 흐름을 설계하고 정보의 무게감을 조절하여 사용자의 시선이 이동하는 경로를 만든다.

4. 리듬 (Rhythm)

디자인의 리듬은 반복적이거나 패턴화된 요소를 통해 통일성과 흐름을 제공하는 원리이다. 운동감과 생동감을 불어넣어 전체적으로 조화를 주며, 사용자에게 편안함과 친숙함을 느끼게 한다.

-반복적 리듬

동일한 요소를 일정한 간격으로 되풀이하는 가장 기본적인 리듬이다. 통일감과 질서를 주며, 사용자에게 시각적인 편안함을 제공한다.

-점진적 리듬

요소의 크기, 색상, 간격 등을 단계적으로 변화시키는 방식이다. 시선에 강한 방향성을 부여하며, 부드러운 흐름이나 점차 커지는 긴장감을 만든다.

-순환적 리듬

요소를 원형 패턴으로 반복 배치해 시선이 자연스럽게 돌아가며 흐름을 느끼게 한다. 시선을 따라가며 조화로운 느낌을 줄 수 있다.

5. 통일 (Unity)

디자인의 통일은 여러 요소를 같은 규칙으로 맞춰 전체가 하나의 일관된 형식과 질서를 갖게 하는 원리이다. 사용자에게 안정감과 정돈된 느낌을 주며, 메시지를 혼란 없이 전달하는 데 핵심적인 역할을 한다.

-반복

통일성을 부여하는 가장 강력하고 쉬운 방식이다. 단순히 똑같은 것을 나열하는 것을 넘어, 시각적 규칙을 만들어 사용자에게 신뢰감을 전달한다.

-유사성

모양이나 크기, 질감이 비슷한 요소들을 섞어 배치함으로써 시각적 일관성을 부여하는 방식이다. 유사한 요소들을 배치해 사용자에게 더 강한 의미 전달이 가능하다.

디자인 원리를 공부하며

아직 이론적으로만 공부하는데 있어서 실습을 하기 전에 디자인 기초지식을 탄탄하게 만들어 준다는 느낌이 들기는 하지만 혼자하는 공부이다 보니 지루한 면이 확실히 있다. 누군가 피드백을 해주거나 의사소통하면서 작성하면 더 재밌었겠다는 생각도 있지만, 그래도 혼자 꾸준히 무언가를 한다는 부분에서 나에게 도움이 많이 될 거라고 생각한다.

(썸네일 사진 출처) -작가 rawpixel.com, Freepik-

1. UX/UI 기본 개념.

UX 디자인 (User Experience Design)

UX는 User Experience(사용자 경험)을 줄인 말로 사용자가 제품이나 서비스를 사용할 때 느끼는 전반적인 경험을 설계하는 과정이다. 사용자가 제품이나 서비스를 이용하는 과정에서 느끼는 감정, 태도, 인식 등 모든 측면이 UX에 포함되는데 사용자 경험을 분석하고 반영한 제품이나 서비스는 사용자 만족도와 충성도를 높일 수 있다.

UI 디자인 (User Interface Design)

UI는 User Interface(사용자 인터페이스)를 줄인 말로 사용자가 제품과 상호작용하는 화면, 버튼, 텍스트, 이미지 등 시각적 요소들을 설계하는 과정이다. 시각적 디자인을 통해 사용자가 제품을 쉽게 이해하고, 직관적으로 사용할 수 있도록 만들고 이런 디자인은 사용자가 제품 또는 서비스를 사용하는 동안 어떻게 반응하고 동작해야 하는지 알려주는 중요한 역할을 한다.

2. UX/UI 디자인 용어.

디자인 씽킹 (Design Thinking)

사용자에 대한 깊은 공감을 바탕으로, 문제를 창의적으로 정의하고 반복적인 프로토타입 및 테스트를 통해 혁신적인 해결책을 찾는 인간 중심의 문제 해결 방법론이다. 핵심은 공감, 정의, 아이디어, 프로토타입, 테스트의 5단계 과정을 통해 사용자의 잠재적 니즈를 해결하는 것이다.

와이어프레임 (Wireframe)

제품의 초기 구조와 레이아웃을 단순하게 표현한 설계도이다. 디테일 없이 전체적인 배치만 보여주며 색상이나 이미지 대신 구조에 집중하여 사용자 흐름을 설계하고, 개발자 및 디자이너와 빠르게 소통하여 피드백을 반영하는 데 사용된다.

프로토타입 (Prototype)

아이디어나 제품을 본격적으로 생산하기 전, 기능과 디자인을 검증하기 위해 제작하는 초기 형태의 시제품이다. 3D 프린팅, 모형, 시뮬레이션 등 다양한 방식으로 빠르게 구현하여 피드백을 수집하고 최종 제품의 품질 향상과 개발 위험을 줄이는 것이 목적이다.

사용자 페르소나 (User Persona)

주요 사용자 그룹을 대표하는 가상의 캐릭터를 의미하며, 사용자를 실제 사용자로 시각화하는 데 도움이 된다. 따라서 고객의 요구 사항에 최적화된 맞춤형 사용자 환경을 구축할 수 있다.

사용자 여정 지도 (User Journey Map)

사용자가 특정 목표를 달성하기 위해 거치는 전체 과정을 시각화하여 보여주는 방법으로, 다섯 가지 세부 영역에서 시간의 흐름에 따라 시각화한 지도이다. 제품, 서비스의 강점이나 기회요인을 고객 관점에서 파악할 수 있게 하고 디자인, 개발, 비즈니스 의사 결정에 활용되는 중요 지표이다.

3. 시각적 디자인 관련 용어.

타이포그래피 (Typography)

텍스트의 글꼴, 크기, 간격, 배열 등을 설계하는 방식이며 정보를 명확히 전달하기 위해 글꼴, 두께, 배열, 계층 구조를 정의하여 디자인의 시각적 완성도와 일관된 사용자 경험을 제공하는 핵심 요소이다.

반응형 디자인 (Responsive Design)

데스크톱, 태블릿, 스마트폰 등 다양한 기기의 화면 크기에 최적화된 UI 설계이다. 유동적이고 유연한 이미지를 사용하여 일관된 사용자 경험을 제공하기 위한 요소이다.

컬러 팔레트 (Color Palette)

브랜드 또는 제품의 색상 조합을 의미하며 색상을 적절하게 조합함으로써 제품 분위기와 디자인 전체에 일관성을 부여한다. 적절한 색상의 조합은 사용자 경험을 크게 좌우하기 때문에, 컬러 팔레트 선택은 매우 중요하다.

마이크로 인터랙션 (Microinteraction)

사용자가 특정 행동을 수행할 때 일어나는 작고 짧은 상호작용으로 사용자에게 명확한 피드백을 제공하고 시스템의 상태를 알려주는 역할을 한다. 버튼 클릭 시 색상 변화, 이메일 전송 후의 확인 메시지 등이 있으며 이런 작은 신호들은 사용자가 제품과 상호작용하는 것을 더 쉽게 이해하게 만들어주고, 자연스럽게 사용할 수 있게 도와준다.

4. 사용자 데이터 및 테스트 용어.

A/B 테스팅 (A/B Testing)

두 가지 버전(A와 B)을 사용자에게 각각 노출하여 성과를 비교하는 실험 방법이며 해당 UI의 효과를 정량적으로 측정하여 대조하는 기법을 말한다. 최적의 디자인 또는 콘텐츠 선택을 하기 위해 사용된다.

디자인 접근성 (Accessibility)

장애인, 고령자 등 모든 사용자가 조건에 상관없이 디지털 제품 및 환경을 동등하게 이용할 수 있도록 설계하는 디자인 방식이다. 직관적인 탐색, 스크린 리더 호환성 등 품질을 높이고 포용적인 사용자 경험을 제공한다.

디자인 사용성 테스트 (Usability Testing, UT)

사용자가 프로토타입이나 제품을 직접 사용하며 그 과정을 관찰하여 문제점과 개선 요구사항을 찾아내는 사용자 경험 검증 방법이다. 행동 패턴이나 데이터를 수집하여 UI/UX를 최적화하는 데 활용된다.

고객 추천 지수 (Net Promoter Score, NPS)

고객이 제품, 서비스를 추천할 의향을 0~10점으로 묻는 핵심 질문을 통해 사용자의 충성도와 만족도를 측정하는 지표이다.

5. 브랜드 및 비즈니스 관련 용어.

디자인 시스템 (Design System)

웹이나 각종 서비스 UI 디자인에 있어서 버튼, 색상, 타이포그래피 등 일관된 디자인을 유지하기 위한 구성 요소와 규칙 모음이다. 미리 만들어 놓은 컴포넌트를 재사용함으로써 일관적이고 효율적으로 디자인할 수 있는 요소이다.

MVP (Minimum Viable Product)

최소한의 기능만 갖춘 제품으로, 시장 반응을 테스트하기 위해 빠르게 출시하는 제품이다. 비용과 시간을 최소화해 피드백을 수집하는 전략이다.

디자인 온보딩 (Onboarding)

사용자가 제품, 서비스를 처음 접할 때 기능과 가치를 빠르게 이해하고 익숙해지도록 돕는 UX/UI 전략이다. 튜토리얼, 혜택 안내, 권한 설정 등 다양한 형태를 통해 사용자의 첫인상을 형성하는 역할을 한다.

CTA (Call to Action)

웹사이트, 앱, 광고에서 사용자가 구매, 가입 등 특정 행동을 하도록 유도하는 시각적 요소이다. 가시성을 높이고 전환율을 극대화하는 역할을 한다.

6. 요즘 주목받는 최신 용어.

다크 모드 (Dark Mode)

어두운 배경에 밝은 색상의 텍스트와 요소를 배치하는 UI/UX 디자인으로 눈의 피로를 줄이고 어두운 환경에서 가독성을 높이며 OLED 기기의 배터리를 절약하는 디자인이다.

모션 디자인 (Motion Design)

그래픽 요소, 텍스트, 이미지에 시간의 흐름에 따른 움직임을 더해 정보나 메시지를 역동적으로 전달하는 시각 디자인이다. 웹사이트, 모바일 앱, 영상 콘텐츠 등에서 사용자 참여를 유도하고 직관적인 경험을 제공하는 데 활용되며 2D, 3D 기술을 사용하여 브랜드 아이덴티티를 강화하는 역할을 한다.

보이스 UI (Voice User Interface, VUI)

사용자가 음성 명령을 통해 기기나 서비스와 상호작용할 수 있도록 대화 흐름, 발화 내용, 시각적 피드백을 설계하는 과정이다. 화면을 보지 않고도 작동하는 기술이기 때문에, 시각적 정보가 제한적인 환경에서 직관적이고 효율적인 사용자 경험을 제공한다.

용어 정리를 마치며

이번에 글을 작성하면서 느꼈던 것은 작성하기 전에 항상 큰 틀을 어떻게 짜야 할지가 어렵게 다가왔었는데 이번에는 그래도 직관적이고 통일성있게 틀을 잘 짠 것 같은 느낌이 든다. 전체적인 큰 틀을 어떻게 짜야 할지부터 생각하고 작성하니 디테일한 부분은 자연스럽게 따라왔다. 이전에 작성했던 글을 읽어보면 신경써서 작성한 글이나 디테일한 요소를 열심히 배치했다고 생각해도 전체적인 큰 틀이 무너지면 가독성이 매우 떨어진다는 느낌을 받았다. 그래도 오늘은 스스로 만족스러운 결과가 나온것 같아서 실수하더라도 꾸준히 하면 결국에는 좋아진다는 사실이 몸으로 체감이 된 것 같다.

창조는 무(無)에서 생기지 않고 기존의 것을 반복, 응용, 결합하는 과정에서 변화가 일어나며 새로운 것이 탄생한다는 말이 있다. 좋은 UX/UI 디자인을 위해서는 기존의 좋은 UX/UI 디자인 사례를 봐야한다.

'라이브 스트리밍 플랫폼 치지직'

2024년 5월 9일, 정식 서비스를 시작한 치지직은 네이버의 라이브 스트리밍 플랫폼이다. 치지직은 게이머와 크리에이터들을 위한 공간으로 아래와 같은 주요 서비스를 제공하고 있다.

-치지직 홈 홈에서는 현재 진행 중인 라이브 방송과 동영상을 탐색할 수 있다.

-실시간 채팅 함께 방송을 보고 있는 시청자들과 실시간으로 소통할 수 있다.

-후원 좋아하는 스트리머를 응원하고 싶을 때 전달하고 싶은 메시지와 함께 스트리머에게 후원할 수 있다.

*1) 로고 *

네이버에는 정말 다양하고 많은 서비스가 있다. 이 서비스들 모두 어떤 이름이 좋을지 고민하는 과정을 거쳐 탄생하는데 치지직은 두 가지 기준을 최우선으로 정해졌다. 서비스 속성이 명확하게 드러날 것, 사용자가 이해하기 쉬운 표현일 것.

(치지직 네이밍을 바탕으로 다양하게 구상했던 아이디어 스케치)

치지직은 라이브 스트리밍 플랫폼의 후발주자이기 때문에 젊은 사용자들이 흥미를 보이며 확 이끌릴 만한 이름이 절실했다. 논쟁적이더라도 관심을 받는 게 낫다는 생각에 조금은 낯설지만 독특한 ‘치지직’이 네이버의 스트리밍 서비스 이름으로 최종 선정됐다.

2) UX/UI 디자인

치지직은 같은 라이브 스트리밍 플랫폼인 트위치가 철수하면서 출시 예정이었던 치지직이 많은 관심을 받았다. 트위치의 자리를 빠르게 대체해야 한다는 미션을 받은 셈인데 그래서인지 치지직이 론칭하고 트위치와 UX/UI를 비교하는 이야기들이 많았다.

(라이브 스트리밍 플랫폼 트위치)

(라이브 스트리밍 플랫폼 치지직)

치지직의 전략은 기존 트위치 사용자를 겨냥해서 최대한 익숙함을 추구했다. 새로운 서비스라고 무조건 새로운 사용성을 제공하는 게 아니라 사용자들에게 습관으로 자리 잡아버린 UX가 무엇인지, 개성을 어디에 녹일 것인지를 고민했다. 방송 화면과 채팅 영역 같은 기본적인 화면은 다른 플랫폼과 비슷하더라도 익숙하게 가는쪽으로 선택했는데 편안함을 주는 최적의 지점을 찾아내기 위해 기획, 개발, 디자인 모두 디테일하게 구현했다. 트위치 철수 이후 대거 유입을 수용하고 시청 기록 분석과 추천 알고리즘 강화 등
고화질 송출을 안정화했다는 평가도 확인된다.

2. UX/UI 디자인 사례를 작성하며.

나는 평소에 라이브 스트리밍을 보는 것을 좋아하기 때문에 치지직이라는 플랫폼을 예시로 들어 글을 작성하니 훨씬 재미있었다. 아무래도 내가 좋아하는 분야고 이 분야와 연계해서 UX/UI 디자인 사례를 조사해서 작성하니 부담도 덜 되고 스트레스도 적었다. 또, 글이 조금 더 안정적으로 보여지기 위해서 다른 사람들이 작성한 글의 맥락이나 구성 등을 참고하면서
가독성은 좋은지, 전달하고자 하는 메시지가 분명한지 더 신경쓰면서 작성한 것 같다.

(출처) https://fficial.naver.com/contentDetail/80 https://fficial.naver.com/contentDetail/76 https://www.twitch.tv/?lang=ko https://chzzk.naver.com/

'프로덕트 디자인'이란 제품의 전체적인 설계와 전략적 방향을 다루는 포괄적인 디자인 분야이며, 사용자 중심의 문제 해결과 목표 달성을 위해 디지털 서비스(App, Web) 및 제품의 전체적인 경험을 기획하고 설계하는 것이다. 이보다 조금 더 세부적이고 시각적 요소에 집중하는 'UX/UI 디자인'이 있는데 이 두 가지를 동시에 포함하는 작업을 하는 사람을 '프로덕트 디자이너' 라고 부른다.

2. UX/UI 디자이너.

'UX/UI 디자인'이란 디지털 제품에서 사용자가 느끼는 총체적인 경험을 개선하고, 시각적으로 매력적이며 직관적인 화면을 설계하는 것이다. 이를 통해 사용자가 편리하고 즐거운 경험을 하도록 서비스 흐름을 설계하고, 시각적 요소를 구현해 문제를 해결하는 전문가를 'UX/UI 디자이너'라고 부른다.

3. 프로덕트 디자이너의 필요성.

디지털 제품과 서비스가 우리의 일상 생활과 업무에 깊숙이 통합되면서, 디자인에 대한 중요성이 커지고 있다. 기업들은 경쟁력을 유지하고 차별화된 제품과 가치를 제공하기 위해 디자인 중심의 사고를 채택하고 있고 4차 산업혁명과 기술발전과 함께 AI, AR/VR, IoT, 자율주행과 같은 최신 기술들이 제품에 통합되면서 이를 설계하는 프로덕트 디자이너의 역할이 더욱 중요해지고 있다.

4. 이게 맞나...?

단어나 기본 지식들을 익히면서 앞으로 어떤 것을 배우게 되겠구나 라는 생각으로 정리해봤다. 자료를 읽고 조사해 보면서 인터넷에 나와 있는 정보를 무작정 긁어모으는 게 아니라 내 나름의 정리 방식으로 재해석해서 작성하다 보니 생각보다 쉽지 않다고 느꼈다. 세세하고 길게 정보들을 나열하는 것 보다 최대한 압축한 자료를 작성하고 싶어서 정리 해봤는데 작성한 글이 정말 적은 양임에도 불구하고 글에 어떻게 통일감을 줄지, 전달하고자 하는 핵심 정보가 무엇인지 고민하는데 어려움이 있었다. 정말 많이 모자라지만 꾸준히 글을 작성하면서 조금씩 정보 전달력을 키우는 연습을 하는데 초점을 맞추려고 한다.

(썸네일 사진 출처) -작가 rawpixel.com, Freepik-

컬럼비아 대학교 심리학과 교수인 리사 손 교수는 '메타인지 학습법' 저자이다. 메타인지란 자신이 무엇을 알고 무엇을 모르는지 아는 것, 자신의 생각에 대해 판단하는 자기 인지 능력을 뜻한다. 철학자 소크라테스가 얘기했던 '너 자신을 알라' 라는 문구 역시 설명하면 메타인지라 할 수 있다. 다시 돌아와서 리사 손 교수는 본인의 삶에서 겪었던 어려움을 '메타인지' 를 통해 극복했던 경험을 많은 사람들에게 이야기 하고자 했다.

그녀가 대학교 1학년 때, 교수님이 그룹 프로젝트 과제를 줬는데 다른 학생들과 함께 토론을 하다가 좋은 생각이 떠올라서 아이디어를 냈다. 하지만 한 학생이 "그건 아닌 것 같다" 고 얘기하자 자신이 냈던 의견이 부끄러운 나머지 다음부터는 새로운 아이디어가 생각나도 말하지 않겠다고 다짐했다. 시간이 지나서 대학교 4학년 때, 그녀는 메타인지에 대한 책을 읽다가 충격을 받았는데 '메타인지란 나의 완벽하지 않은 모습을 인정하는 것, 스스로를 믿는 능력' 등의 내용을 보고 완벽하지 못한 자신의 모습이 부끄러워서 아무것도 하지 않던 자신의 모습을 되돌아보게 됐다. 그렇게 그녀는 메타인지에 대한 공부를 시작했고 교수가 된 지금은, 자신이 가르치는 학생들에게도 메타인지의 좋은 영향력을 전달하고 있다.

나 역시 주변 사람들의 반응과 시선 때문에 말을 하거나 행동을 할 때 망설여지는 순간이 많다. 내가 하고 있는 것이 맞나 싶기도 하고 다른 사람들이랑 비교했을 때 조금이라도 다르면 불안하고 완벽한 모습만 보이고 싶고 실수하기 싫어서... 글을 작성하는 지금 이 순간에도 이 글을 완벽하게 작성하고 싶어서 지웠다 고쳤다 한다. 그래도 시간이 지나면서 생각하고 깨달은 것은 실수는 당연한 과정이고 완벽이란 것은 없다는 것이다. 그래서 최대한 마음 편하게, "완벽하지 않아도 괜찮아" 라고 나에게 말해주고 싶다.

(출처) -리사 손 컬럼비아대학교 바너드칼리지 심리학과 교수- -세바시 강연 Sebasi Talk-

[유튜브 링크]

작년 11월, 다니던 직장이 없어지고 원래 근무하던 직종과는 다른 업무에 도전해 보고 싶었다. 그래도 4년 동안 근무했던 회사였기 때문에 원래하던 분야를 포기하고 완전히 새로운 길을 찾아서 가는 것에 대한 두려움이 솔직히 컸다. 쉬면서 내가 무엇을 좋아하는지, 잘하는지에 대한 고민이 길어지다가 26년 2월이 되었다. 나는 취미로 인터넷 방송 보는 걸 좋아해서 평소처럼 보고 있는 와중에 (인터넷 방송 플랫폼 치지직) 흥미로운 광고가 하나 나왔다. 오즈코딩스쿨의 '게임개발 초격차 캠프' 라는 광고였는데 어릴 때부터 게임도 좋아했기 때문에 궁금해서 알아봤다. 게임 개발부터 실습 과정, 인턴십 기회까지 프로젝트 과정이 탄탄해 보여서 한번 해볼까 싶었는데 생각해 보니 나는 게임하는 것을 좋아하지, 게임을 만드는 것은 만들다가 오히려 게임이 싫어질 것 같았다. 그래도 '게임개발 초격차 캠프' 과정 자체는 너무 매력적이라서 다른 교육도 있는지 알아보니 '프로덕트 디자이너 캠프' 라는 교육 과정도 있었다. 프로덕트 디자이너라는 것이 어떤 것인지, 무엇을 공부해야 하는지 조사하다 보니 조사해 볼수록 새롭고 재미있어 보였고 무엇보다 나에게 맞는 옷을 찾은 느낌이 들어서 꼭 취업이 안 되더라도 배우는 것만으로도 나에게 도움이 많이 될 것 같다고 느꼈다. 하지만 '디자이너' 라는 직업 자체를 나는 이때까지 살면서 생각해보지도 않았기 때문에 새로운 배움의 길로 들어서면서 느꼈던 감정은 두렵기도 했지만 설렜다.

2. 프로덕트 디자이너 교육을 받기 전 연습과정.

2026년 2월 26일, 프로덕트 디자이너 교육 과정을 시작하기에 앞서 온라인 교육 환경에 적응하기 위한 마음가짐이나 공부한 것들을 블로그에 작성하고자 한다.

인간의 뇌는 고정되어 있지 않고 환경에 따라 끊임없이 최적화된다는 가설인 '뇌 가소성'에 대해 정리한 영상을 봤다. 주요 내용은 동물과 달리 인간의 뇌는 어떤 환경에서도 적응하기 위해 유연하게 변화시키는 가소성을 선택했고 그 가소성 덕분에 변화하고자 하는 강력한 내재적 동기나 꾸준함이 있다면 어떠한 형태로든 바뀔 수 있다는 것이다. 새로운 분야에 도전해서 첫걸음을 뗀 지금의 나처럼 변화된 환경에 적응하고 최선을 다해 노력해서 무언가를 얻고자 한다면 추상적이지만 지금의 나보다 더 성장한 자신이 되어 있을거라 생각한다.