모를 때 보는 개발로그

[React Three Fiber] TypeScript 적용 삽질기

limdoohee — Thu, 4 Apr 2024 09:42:35 +0900

항상 느끼는 거지만, 외부 라이브러리를 붙일 때 TypeScript 적용이 힘들다.

그래서 TypeScript 적용을 미뤄 JavaScript 로만 작성했는데, 어느날인가 문득 도전의식이 샘솟은 것이 아닌가.

그 결과, 삽질하는 과정 - 시이작.

✔️ 내 코드의 구조는 대략 이렇다.

Canvas 안에서 Bottles 라는 컴포넌트를 호출하고,
Bottles는 Bottle이라는 컴포넌트에 렌더될 3D 모델의 node의 키 값을 Prop으로 전달한다.
Bottle이 3D 모델에서 전달받은 glas와 cap이 사용된 node의 키를 geometry로 렌더한다.

= 이것은 하나의 3D 모델 안에 여러개의 node가 존재할 때, 동적 렌더링을 할 수 있는 완벽한 계획

.js 파일을 .tsx 파일로 바꾸고 나니, 역시나 빨간줄의 공포가 시작되었다.

nodes[glas].geometry 와 nodes[cap].geometry 부분에서 빨간줄이 생기면서 합법적 괴롭힙이 시작됐다.

<Canvas>
  <Bottles />
</Canvas>

function Bottles() {
  return (
    <group dispose={null} scale={[0.1, 0.1, 0.1]}>
      <Bottle position={[140, 0, 0]} glas="Untitled018" cap="Untitled018_1" />
      <Bottle position={[80, 0, 0]} glas="Untitled078" cap="Untitled078_1" />
      <Bottle position={[-2, 0, 0]} glas="Untitled064" cap="Untitled064_1" />
      <Bottle position={[-90, 0, 0]} glas="Untitled052" cap="Untitled052_1" />
      <Bottle position={[-140, 0, 0]} glas="Untitled072" cap="Untitled072_1" />
      <Bottle position={[-180, 0, 0]} glas="Untitled007" cap="Untitled007_1" />
    </group>
  )
}


function Bottle({ position, glas, cap }) {
  const { nodes } = useGLTF("/models/bottles.glb");
  return (
    <group dispose={null}>
      <group
        rotation={[Math.PI / 2, 0, 3]}
        position={position}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes[glas].geometry}
          material={bottleMaterial}
        />
        <mesh
          castShadow
          receiveShadow
          geometry={nodes[cap].geometry}
          material={capMaterial}
        />
      </group>
    </group>
  )
}

아래와 같은 에러문이 발생했다.

Type error: Property 'geometry' does not exist on type 'Object3D<Object3DEventMap>'.

✔️ 그렇다면, 지금부터 원인 분석

React Three Fiber에서 3D 모델을 렌더링 할 때, useGLTF 라는 drei 에서 제공하는 예쁜 Hook의 도움을 받아 코드를 작성한다.

useGLTF 안을 들여다보면, 첫 번째 라인에 three-stdlib 에서 정의된 타입을 사용하는 것을 확인할 수 있다.

바로 확인 들어간다.

GLTF라는 인터페이스안에는 useGLTF hook 문법에서 자주 쓰는

const { nodes, materials } = useGLTF(modelpath);

에서의 nodes 와 materials 가 보이지 않는다.

왜냐?

내 추측으로는 3D 모델에서 nodes 가 어떤 타입이며, materials 가 어떤 정보를 담고있을지 추측할 수 없기 때문이다.

✔️ 그래서 어떻게 했냐면,

기존에 three-stdlib 에서 지원하는 GLTF 타입과 새로운 타입을 인터섹션 타입으로 정의해서 useGLTF 타입으로 임명해줬습니다.

여기서 키 포인트는, 우리는 GLTFResult에서 nodes 안에 Index Signature에 대한 타입을 선언해야 에러가 없다!

예를 들어 Untitled018 : THREE.Mesh 이렇게 작성하면, 아래와 같은 무시무시한 에러를 영접할 수 있다.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

코드로 표현하자면 이런식으로 할 수 있다.

import { GLTF } from "three-stdlib";

type GLTFResult = GLTF & {
  nodes: {
	[key : string] : THREE.Mesh;
  };
  materials: {
    ["default"]: THREE.MeshStandardMaterial;
  };
};

const Bottle = ({ position, glas, cap }) => {
  const { nodes } = useGLTF("/models/bottles.glb") as GLTFResult;
  return (
    <group dispose={null}>
      <group
        rotation={[Math.PI / 2, 0, 3]}
        position={position}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes[glas].geometry}
          material={bottleMaterial}
        />
        <mesh
          castShadow
          receiveShadow
          geometry={nodes[cap].geometry}
          material={capMaterial}
        />
      </group>
    </group>
  );
};

~~타입스크립트 너어~~ 정말 만만치 않구나? ^^~~

[TypeScript] 장점과 단점

limdoohee — Wed, 3 Apr 2024 09:50:07 +0900

TypeScript는 발표된지 10년동안 꾸준한 사랑을 받고 있으며, JavaScript 개발 환경에서는 빠지면 안되는 보조 도구가 되었다.

하지만, 모든 언어가 그렇듯 장점만 존재하지도 단점만 존재하지도 않는다.

장점

1. 정적 타입

TS 사용의 가장 큰 이유이며, 런타임 에러를 예방한다.

// JS
const user = {
  name: "Daniel",
  age: 26,
};
user.location; // returns undefined

// TS
const user = {
  name: "Daniel",
  age: 26,
};
 
user.location;
!Property 'location' does not exist on type '{ name: string; age: number; }'.

2.프로퍼티, 변수 검사

type-cheker를 통한 변수 및 기타 속성의 접근 검사를 통해, 코드 작성의 실수를 방지한다.

3. 객체지향 프로그래밍

클래스, 인터페이스, 상속, 모듈 등 객체 지향 프로그래밍 패턴을 제공함으로써 클래스 기반 객체지향 언어가 익숙한 프로그래머에게 자바스크립트의 러닝커브를 낮춰준다.

단점

1. 컴파일 단계 증가

자바스크립트는 인터프리터 언어로 컴파일이 필요없지만, 타입스크립트를 도입 시 컴파일의 과정을 거쳐야 하는 비용적 측면이 있다.

2. 외부 라이브러리의 TS 지원 유무

간혹 TS를 지원하지 않거나 친절한 타입 설명이 되어있지 않은 경우, JS로 수정해야 하는 번거로움이 발생한다.

3. 학습 곡선

새로운 언어를 배우는 시간과 비용이 발생하며, 초기 학습 중에는 적용에 어려움을 겪을 수 있다.

그럼에도 불구하고, 왜 타입스크립트를 도입해야 하는냐
프로그래머는 함께 일하기 때문이다.
소통에서 단계가 줄어들고, 일하는 과정에서 오류가 줄기 때문에
현재의 단점이 있더라도 미래의 장점을 위해 도입하는 것으로 생각된다.

[TypeScript] 개념과 원리

limdoohee — Tue, 2 Apr 2024 15:52:34 +0900

1) 개념

TypeScript(이하 TS)는 C#의 창시자인 엔지니어가 개발을 주도하여 2012년 Micrsoft에서 발표한 오픈소스이다.
자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 SuperSet으로 자바스크립트 문법을 그대로 사용할 수 있다.
자바스크립트에 존재하지 않는 정적 타입을 지원한다.

그렇다면, 코드를 TS로 작성할 경우, 브라우저 혹은 엔진에서 TS 파일 자체를 읽는 것일까?

그 안에서는 어떤 동작이 이루어지고 있을까, 원리를 알아보자.

2) 원리

1. TS 컴파일러(TSC) 에서 하는 일 (컴파일)

TS 코드 -> AST 코드 -> 타입 체크 -> JS 코드

2. JS 엔진에서 하는 일 (런타임)

JS 코드 -> AST 코드 -> 바이트 코드

자바스크립트만 사용할 때는 1번이 생략된다. 자바스크립트 인터프리터 언어이기 때문에 컴파일 과정이 필요하지 않기 때문이다.

과정이 늘어나는 비용이 발생함에도 불구하고 왜 TS를 도입하는것인가?

바로 "오류 단계" 때문이다.

예정되어 있는 오류가 컴파일에서 발생한다면 런타임에서 발생하는 것보다 예방적이고, 효율적이다.

TS를 도입함으로써 사전 오류 검증의 단계가 추가되기 때문에, 작은 비용을 감수하고라도 더 큰 비용 지출을 방지한다.

OpenGL? WebGL?? WebGPU???

limdoohee — Tue, 26 Mar 2024 21:37:42 +0900

3D를 공부하기 시작하면서, WebGL과 OpenGL은 빠지지 않고 한 번쯤은 들어보는 단어이다.

그럼 대체 이것들이 무엇이고, 3D가 컴퓨터에서 돌아가기 위해서 어떻게 동작하는지는 기본으로 알아야한다고 생각한다.

OpenGL : Open Graphics Library의 줄임말로 무려 1992년 크로노스 그룹에 의해 발표된 2D, 3D API(규격서)이다. 라이브러리와는 기대와는 달리 구현없이 규격에 대한 정의만 있다.

OpenGL은 로우레벨 API라 거의 모든 것을 수동으로 설정해야하고, 그마저도 수학적인 지식이 갖춰져야 편하다고 한다.

Microsoft에서 개발한 DirectX와 Apple도 한때 애용했지만, 자체적인 Metal 을 만들면서 OpenGL은 점유율을 점점 잃었고, Vulkan을 개발하기에 이른다는 슬픈 역사도 있다. (DirectX와 Metal도 함께 알아보도록 하자)

최신버전은 2017년에 발표한 4.6버전이 마지막이고, Vulkan보다는 예전 기술이지만 오히려 OpenGL이 더 높은 사용량을 자랑한다.(응?)

OpenGL의 역사가 여간 길다보니 드라이버가 베베 꼬일대로 꼬여버려 복잡도가 어마어마 하다고, 그래서 Vulkan을 개발할 때는 스펙을 최소화하고 개발자에게 대부분의 일을 위임했더니 사용이 엄청 어려워졌다는 후문이 있다. 그래서 결국 최신에 개발된 Vulkan을 놔두고 OpenGL이 높은 사용량을 자랑하게 된 것이다.(ㅎ..)

그렇다면 웹에서 3D를 사용할 때, 빈번하게 접하는 WebGL은 무엇일까?

WebGL : 브라우저 환경에서 OpenGL을 플러그인 도움 없이 공식적으로 사용할 수 있도록 크로노스 그룹에서 제정한 웹 그래픽스 API!!!!!

(세상에, 별도 플러그인 없이 바로 OpenGL이 사용가능하다니 너무 좋은 세상이에요)

지원중인 브라우저는 크롬, 엣지, 사파리, 파이어폭스, 오페라 가 있다.

게다가, 디버깅 가능한 WebGL API를 통해 WebGL 콘텐츠를 최적화하거나 GPU 문제를 수집 할 수 있다. (https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_debug_renderer_info)

WebGL은 뛰어넘는 다음 세대의 기술이 있다던데, 그것은 바로 WebGPU.

WebGPU : WebGL을 단점을 보완하고자, W3C GPU for the Web Community Group이 애플, 모질라, MS, 구글 등의 엔지니어들과 함께 개발한 API이다.

2024년 3월 기준으로 크롬, 엣지, 오페라는 지원 중이며, 다른 브라우저는 아직인 것 같다.

결국, 브라우저가 지원해줘야 web에서 작업을 할 수 있을 것 같긴 하다.

아직은, 멀고 먼 webGPU의 이야기지만, 미리 공부하고 비교해서 머리속에 꽉꽉 채워놔야겠다.

[React three drei] Scroll 파헤치기

limdoohee — Mon, 25 Mar 2024 13:26:59 +0900

drei 에는 ScrollControls 라는 기능이 있다.

Dom에서 스크롤 이벤트를 통해 Canvas를 조작할 수 있는 기능.

재밌는 것을 위해 사부작대던 중, 버그가 있는 것을 발견하고 이 부분을 심층적으로 파볼까 싶어 글을 작성하게 되었다.

Scroll controls create a HTML scroll container in front of the canvas. Everything you drop into the <Scroll> component will be affected.

스크롤 컨트롤은 캔버스 앞에 HTML 스크롤 컨테이너를 만듭니다. <스크롤> 컴포넌트에 놓는 모든 것이 영향을 받습니다. 라고 deepL씨의 도움을 받아 이해하게 됐다.

Dom Node을 비교해보면 확연하다. 왼쪽은 ScrollControls가 코드에 있는 상태, 오른쪽은 없는 상태이다.

ScrollControls 컴포넌트를 삽입한 쪽은 Dom 에 뭔가 Scroll 할 수 있는 Node가 생긴 것을 확인할 수 있다.

이것때문에 스크롤을 할 수 있게 된 것이다.

왼쪽 하늘색 상자 바로 밑의 라인을 보면 height:500%; 인 것을 알 수 있는데, 이것은 ScrollControls의 pages속성의 값으로 스크롤 영역의 길이를 정의한다.

여기서 내가 발견한 버그는 ScrollControls 밖에 있는 컴포넌트 또한 Scroll 이벤트가 발생한다는 것!

이렇게 ScrollControls 밖에 Html을 작성했을 때, 고정되면 좋겠지만, 결과는 Scroll 이벤트가 발생한다.

Dom Node도 역시, 슬프게도 스크롤 영역 안으로 슉 들어가버린다.

Q. 고정시키고 싶은 무언가가 있고, 스크롤하고 싶은 무언가가 같은 화면에 공존해야한다면?

고정하고 싶은 것인 문자일 경우, Canvas 밖으로 빼고 별도 Html로 작성한다.

스크롤에 따른 애니메이션 처리를 별도로 해야 하는 번거로움이 있다.

Q. ScrollControls의 속성인 enabled로 값을 조정한다면?

이미 Dom에는 컴포넌트가 스크롤 영역안에 렌더링된 상태기 때문에 속성을 조정한다고 해도 스크롤 영역의 값이 달라지거나 하지 않는다.

enabled는 webGL의 영역의 속성으로 보인다. 이미 html 태그로 렌더링 된 node 에는 적용되지 않는다.

[React Three Fiber] Texture 조절하기

limdoohee — Wed, 20 Mar 2024 14:34:29 +0900

프론트엔드 개발자가 3D 라이브러리 React Three Fiber 및 Three.js를 다루던 중 문제를 해결하는 과정을 보실 수 있습니다. (이하 삽질)

프로젝트를 하던 중, 아래와 같이 바닥에 texture를 넣었다.

아래와 같은 이미지를 사용했지만, 바닥에 렌더링 된 것은 뭔가 형태가 변한 모습이었다. 예쁘지 않은 모습으로 변했달까..

성공적인 모습을 위해 삽질을 시작하려 한다.

1. drei를 이용해 useTexture를 사용하는 중인데, 프로퍼티가 친절하지 않으니 Three.js 로 방문한다.

2. https://threejs.org/docs/index.html?q=texture#api/en/textures/Texture 에서 사용할 수 있는 프로퍼티를 살펴보며 인사이트를 얻는다.

3. 'repeat 이라는 프로퍼티를 사용해 텍스처를 반복시킬 수 있지 않을까?' 생각한다.

4. examples 에서 내가 활용할 수 있을법한 예제를 찾는다. (못찾으면 폭풍 구글링,,)

5. 예제 코드를 참고해 코드를 요리조리 수정해보며 테스트한다.

6. 크기에 따라 자동조절할지, 사용자가 수동조절하게 할지 등 아름다운 연장선상의 고민을 한다.

결론 :

문제해결까지는 6단계밖에 거치지 않은 것처럼 보이지만, 모든 예제가 이렇게 해결되는 것은 아니다.

아주 간단한 문제인 것 같은 것도 몇 시간, 며칠을 고민하고 찾아보는데 시간을 할애하기도 한다.

여태까지 개발이 그래왔듯이, 3D는 아직 나에게 미지의 영역이라 공부하는 재미가 쏠쏠하다.

그 언젠간 '아, 이거 전에 했었는데', '이렇게 하는거였지', '여기 예제 활용하면 되겠는데' 등 금방 해결할 수 있는 능력이 쌓여가기를 바라면서 오늘도 화이팅!

[3D 라이브러리 비교] Three.js VS React Three Fiber

limdoohee — Mon, 11 Mar 2024 19:18:50 +0900

바닐라 자바스크립트를 이용한 Three.js냐

컴포넌트 개발을 이용한 React Three Fiber(이하 r3f)냐

당연히 React를 쓴다면 r3f를 , 순수 javascript로 개발을 한다면 Three.js 를 사용하는 것이 더 효율적일 것이다.

1. React 환경에서 코드량을 줄이고 싶다면 당연히 r3f!

위의 url에서 비교로 알 수 있듯이 r3f는 Three.js를 컴포넌트화시켜 react 에서 컴포넌트 개발로 연결시키면서 3d를 렌더링 할 수 있다는 장점이 있다.

물론 react 환경에서도 순수 js 파일을 만들고 Three.js로 개발할 수 있다. 하지만 코드 비교로 알 수 있듯, 코드 양에서도 차이가 많다.

특히, 이벤트처리가 추가된다면 코드양에서 어마어마한 차이를 보인다.

2. r3f Example 안에서 해결된다면 r3f!

Three.js와 r3f 모두 많은 예를 제공한다.

아마 구현하려는 거의 모든 기능이 제공될 것이라 생각한다. 없더라도 예제별로 조합하여 사용할 수 있다.

예제의 다양성과 종류는 Three.js가 많지만, r3f 예제 안에서 해결되는 구현 정도라면 r3f를 사용하는 게 시간적인 측면에서 유리하다.

3. 더 많은 커스텀이 필요하다면 Three.js!

Three.js는 r3f 보다 예제가 다양하다.

3d 파일 로드 기능이 다양하며, 각 material에 대한 간단한 예로 바로 이해할 수 있도록 제공한다.

또한, r3f보다 커뮤니티가 활성화 되어있어 활용할 수 있는 예제 및 문제 해결 결과가 많다.

4. 각 기능별 자세한 설명이 필요하다면 Three.js!

r3f는 제공하는 메서드 및 프로퍼티 설명이 충분하지 않다. Three.js의 교육으로 전가하는 느낌이다.

심지어 프로퍼티가 Three.js와 동일하지 않은 메서드도 있다.

Three.js에서 제공하는 순수 기능들도 r3f 에서는 drei를 통해 사용할 수 있고, 별도 설치 및 학습이 필요하다.

아래는 React 환경에서 동일한 화면을 r3f와 Three.js로 구현한 것을 비교한 것이다.

이렇게 간단한 예제에서도 약 2배의 코드량의 차이를 보인다.

각 상황에 맞게 3D 라이브러리를 사용하게 된다면 현명한 사용자 경험 및 개발 용이성을 가져갈 수 있을 것이라 생각한다.

https://lims-web.vercel.app/3d/compare

[React Three Fiber] 페이지 이동하기 aka 라우팅 (Feat.우여곡절)

limdoohee — Mon, 11 Mar 2024 18:26:30 +0900

React Three Fiber를 이용해 위와 같은 화면을 구현했다.

다음 스텝은 각 이미지를 클릭하면 각 링크로(Router) 이동하는 것이다.

1. wouter - 실패

아래의 예제에 나오는 wouter 라이브러리를 통해 (react-router-dom과 크게 달라보이지 않지만) 링크를 이동시키는 것을 구현했다.

https://codesandbox.io/p/sandbox/router-transitions-4j2q2?file=%2Fsrc%2FApp.js%3A19%2C12-19%2C16

codesandbox.io

원인 : 네 개 중, 두 개는 3D지만, 나머지 두 개는 3D가 아니다.

3D인 화면으로 router가 이동해도 위의 화면에 사용된 Canvas 내에 다시 Canvas를 렌더링한다.

때문에 온전하게 Link 이동하지 않고, 상하 구조로 두개의 Canvas 가 동작된다.

이는 3D가 아닌 페이지도 동일하다.

예제에서는 Canvas 는 하나고 Canvas를 제외한 Mesh 컴포넌트만 렌더링하기에 가능한 것으로 보인다.

만약 컴포넌트를 나눈다고 해도, 3D가 아닌 페이지는 해결되지 않기 때문에 예제와 같이 하는 것은 실패로 결론지었다.

2. next/navigation - 성공

각 이미지는 Image 라는 react-three/drei 내 컴포넌트를 사용중이다.

onClick 이벤트에 next/navigation 내장훅인 useRouter를 사용해서 링크를 이동하도록 했더니 성공!

생각보다 next가 많은 일을 해주는구나ㅠ

<Image
      ref={ref}
      url={src}
      transparent
      side={THREE.DoubleSide}
      onPointerOver={pointerOver}
      onPointerOut={pointerOut}
      onClick={() => router.push(url)}
      {...props}
    >

[UI 자동 생성 프로그램] Uizard 첫 경험

limdoohee — Fri, 1 Mar 2024 14:01:27 +0900

아무 오랫동안 미뤘던 포트폴리오 사이트를 구축중이다.

근데 UI 레퍼런스를 찾아 퍼블리싱 작업을 하기가 너무 소모적인 것을 느꼈다.

AI도 여러가지 서비스로 나와있기도 하고... 이참에 한 번 써볼까? 싶은 마음에 Uizard 를 선택해 ui 를 자동생성한다!!!

1. Uizard 사이트 접속해서 회원가입한다. : https://uizard.io/

2. 회원가입 후, Template을 선택할 수 있는 화면이 나옵니다.

(몇 개를 제외하고, 모두 Pro 라고 붙어있는거 아마도 유료...)

3. 뻔한 템플릿 쓰기 싫으니까 Generate it with Autodesigner 눌러줍니다.

디바이스 선택하고 작성하라는 거 잘 작성하고 보라색 버튼 클릭하기

4. 진행바가 흘러가고 완성된 화면이 나옵니다.

하단의 메시지박스를 통해서 다른 ui를 생성할 수도, 다시 생성할 수도 있네요.

5. 디자인 컴포넌트를 클릭하고 오른쪽 상단쯤에 있는 Design을 누르면 대강의 스타일값이 나옵니다.

끝,

결론 :

피그마랑 비슷해보여서 매우 유용할 것 같으나 CSS 확인하려고 했더니 유료였습니다...

심지어 템플릿 2개까지만 무료고, 나머지는 또 유료입니다.

요즘 피그마도 그렇고 UI 툴중에 CSS 값은 모두 유료로 전환하는 게 유행인가봅니다.

탈퇴했습니다.ㅎ

(역시 세상에 공짜는 없숴)

나는 어떤 개발자인가

limdoohee — Thu, 22 Feb 2024 15:52:08 +0900

공적인 나와 사적인 나는 크게 다르지 않다.

앞으로 개발자로써 부족한 점과 나아갈 방향을 위해 자아탐구 사회ver. 을 작성한다.

나는 비교를 좋아한다.

- 써드파티와 프레임워크를 비교하고, 사용법,용량,프레임 등을 꼼꼼하게 비교해야 후회하지 않는다.

- 시간을 들여 집요하게 여러가지를 훑어야 직성이 풀리 고, 가격,품질,디자인 등 꼼꼼하게 비교해야 후회않는 않는다.

나는 아끼는 것을 좋아한다.

- 되도록 적은 비용으로 개발 구현하는 일을 좋아한다.

- 시장과 마트 오만군데를 돌아다니며 싸게 사서 건강하게 먹으며 시간에 투자하는 일을 좋아한다.

나는 디저트를 좋아한다.

- 예쁘지 않아도 되는 화면은 없다. 이왕이면 다홍치마. 예쁜 화면과 인터랙션에 관심이 많다.

- 일주일에 한 번, 아주 비싸지 않은 디저트로 달달한 시간을 보내는 것이 유일한 낙이다.

나는 나누는 것을 좋아한다.

- 내 일이 끝난 후에 동료가 어려워하는 부분을 별도 개발에 비교하고 더 나은 방향으로 추천하는 일을 즐긴다.

- 요리를 많이해서 나누고, 사용이 편한 생활용품을 나누고, 선물을 해서 마음을 전달하는 일을 즐긴다.

나는 돌보는 것을 좋아한다.

- 회사에서 일적으로 심적으로 힘든 동료들을 위로하여 나아지는 모습을 보는 것에 보람을 느낀다.

- 식물, 고양이, 사람을 가리지 않고, 내 주변에 있는 생물체를 보다 나은 삶으로 이끌어 건강하게 생명을 유지하는 것을 보는 것에 보람을 느낀다.

나는 대화하는 것을 좋아한다.

- 개발주제로 서로의 의견을 듣거나 보편적인 대화 주제를 통해 동료들과 조금씩 가까워 지는 것에 재미를 느낀다.

- 다양한 사람들의 의견을 듣고, 내 가치관을 관찰하고 의견을 변경되는 것에 재미를 느낀다.