2025-04-12

목차

1. MCP(Model Context Protocol) 포스팅 및 자료 공유
2. 피그마(Figma) 유료 결제 관련 질문
3. Three.js 및 관련 라이브러리 사용 경험
4. Tailwind CSS 유지보수에 대한 토론
5. 스타일 유지보수 비교: Tailwind CSS vs CSS-in-JS
6. 개발 현장에서 흔히 겪는 일상 이야기와 분위기
7. 기타 짧은 소식과 잡담

1. MCP(Model Context Protocol) 포스팅 및 자료 공유

• MCP는 개발 컨텍스트 모델을 다루는 프로토콜임.
• MCP 관련 포스팅과 노션 문서가 공유됨 (블로그, 노션 링크).
• 주로 개발 흐름과 구조를 개선하기 위한 모델링 방법론을 설명.
• MCP 포스팅이 마무리되었으며 관련 자료가 관심 있는 개발자에게 유용함.

MCP란?
Model Context Protocol이라는 개념으로, 소프트웨어에서 데이터 모델과 그 컨텍스트를 효과적으로 관리하기 위한 설계 패턴이다.
보통 복잡한 데이터 흐름이나 상태 관리를 단순화하려는 목적을 가짐.

2. 피그마(Figma) 유료 결제 관련 질문

• 피그마 다운로드는 무료로 가능하지만, 일부 고급 기능은 유료임.
• 유료 결제 없이도 기본 사용은 가능하니, 필요에 맞게 사용하면 됨.

피그마란?
웹 기반 UI/UX 디자인 툴로, 협업과 실시간 편집이 쉬움.
무료 플랜도 제공하지만 팀 협업이나 고급 기능은 유료 플랜 필요.

3. Three.js 및 관련 라이브러리 사용 경험

• Three.js를 사용하는 개발자가 질문을 올림.
• 대체로는 Three.js 뿐만 아니라 Six.js 같은 다른 3D 라이브러리 언급도 있음.
• 3D 웹 애플리케이션 개발 시 많이 활용됨.

Three.js란?
자바스크립트 기반 3D 라이브러리로, WebGL을 쉽게 다룰 수 있도록 도와줌.
3D 그래픽, 애니메이션, 시뮬레이션 개발에 널리 쓰임.

4. Tailwind CSS 유지보수에 대한 토론

• Tailwind CSS는 유틸리티 클래스 방식의 CSS 프레임워크
• 어떤 사람은 유지보수가 빡세다는 의견도 있음.
• 실제로 대규모 프로젝트에서는 클래스가 복잡해질 수 있지만,
• 사용하는 입장에 따라 유지보수 편의성 차이가 느껴짐.

Tailwind CSS란?
유틸리티 퍼스트(utility-first) CSS 라이브러리로, 클래스 이름으로 스타일을 지정함.
직접 CSS를 작성하지 않고도 빠른 스타일링 가능하지만, 클래스가 코드에 과도하게 남을 수 있음.

5. 스타일 유지보수 비교: Tailwind CSS vs CSS-in-JS

• CSS-in-JS는 자바스크립트 내부에서 CSS를 작성하는 방법
• 이 방식은 코드와 스타일이 섞여 있어, 컴포넌트별 관리가 가능하나,
• 렌더링된 결과물을 보고 어떤 컴포넌트인지 파악하기 어려움.
• Tailwind는 스타일이 HTML이나 JSX에 직접 적혀 있어 위치 파악이 상대적으로 쉽다는 의견도 있음.

CSS-in-JS란?
js 코드 안에 CSS를 선언해 컴포넌트 단위로 스타일을 캡슐화하는 기술.
리액트 스타일드 컴포넌트(styled-components), Emotion 등이 대표적.

6. 개발 현장에서 흔히 겪는 일상 이야기와 분위기

• 팀원들이 아침 인사를 주고받고, 간단한 잡담과 응원도 이어짐.
• 식사, 운동, 개인 사정 등 일상 이야기도 풍부해 분위기 화기애애함.
• 어느 팀원이 이별 소식을 전하며 위로와 농담 섞인 반응도 나옴.

7. 기타 짧은 소식과 잡담

• 갑자기 낮잠으로 주말 일정이 망가졌다는 소소한 경험 공유.
• 먹는 사진이 많아지는 추세라는 농담.
• "샵검색"이라는 해시태그로 주제별 검색을 하는 모습도 보임.

면접팁⚡

• Tailwind CSS와 CSS-in-JS 유지보수 비교 질문 시

  • 각 방식의 장단점을 명확히 알자.
  • 실제 프로젝트 경험과 상황에 따라 다르다는 점 강조.
  • 팀 내 협업 효율성, 유지보수 용이성, 코드 가독성 관점 설명 가능해야 함.

• MCP 관련 질문에 대비하기

  • 데이터 모델 관리와 소프트웨어 설계 패턴 이해도 중요.
  • 컨텍스트에 따른 상태 관리와 구조화 방법을 설명할 수 있으면 좋음.

• 3D 라이브러리 (Three.js) 질문 시

  • 기본 개념과 사용 사례를 이야기하고, WebGL과의 관계도 언급하면 좋음.

링크🔗

• MCP 관련 블로그: https://blog.naver.com/pjt3591oo/223830623105
• MCP Notion 정리: https://sponge-palm-382.notion.site/MCP-Model-Context-Protocol-14b6635f37e68024a43fdfa3d4582ba4
• CGPT 및 기타 기술 자료: https://digitalbourgeois.tistory.com/1035
• Github 리포지터리: https://github.com/CreeJee/tanstack-aop-renderer