Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back

[뉴스레터 #304] 니꼬의 Claude Code 세팅을 공개합니다 🔏 2025 프론트엔드 성능 체크리스트

#tips
1개월 전
166

🔼 OpenAI가 ChatGPT에 Study Mode 기능을 출시했음!

🗞 뉴스레터 #304 (2025.08.01)

#따끈따끈한_개발_NEWS📢

  • 🙀 여성 데이팅 안전 앱 "Tea"가 해킹을 당해 사용자들의 얼굴 사진과 신분증 정보가 4chan에 유출되었다고 한다. 문제는 해킹이 아니라 Google Firebase 데이터베이스가 처음부터 인증 없이 공개되어 있었다는 점임. 160만 명 이상의 사용자를 보유한 앱이 셀카와 운전면허증을 요구하면서 기본적인 보안 설정조차 안 해놨다는 게 충격적이다… 일부는 바이브 코딩의 문제점이라고 지적하는데, 사실여부는 조금 더 지켜봐야 할듯. (링크)

  • 🎓 OpenAI가 ChatGPT에 Study Mode 기능을 출시했음! 학생들에게 답을 바로 제공하는 대신 단계별 힌트와 가이드를 통해 스스로 문제를 해결하도록 돕는 기능이라고 한다. 깊이 있는 학습을 유도한다는 취지인데, 과연 정말 도움이 될 것인지? 써 보고 괜찮으면 뉴레에 후기 남기겠음! ✌️ (링크)

  • ⚡ 클로드 코드의 인기를 감당하기 어려웠던 걸까? Anthropic이 8월 28일부터 주간 사용량 제한을 도입한다고 발표했다. 비정상적인 사용량 문제를 해결하기 위한 조치로, 사용자의 5% 미만에게만 영향을 미칠 것이라고 함. 그래도 줄어든다니까 괜히 아쉽다. (링크)

  • 📊 2025 프론트엔드 성능 체크리스트. HTML, CSS, JavaScript, 이미지 처리, 비디오, 폰트, 호스팅, 빠른 성능 개선 등 다양한 영역에 걸쳐 웹사이트 속도와 효율성을 최적화하는 실행 가능한 전략들을 담고 있으니 성능 최적화에 관심 있는 개발자라면 한 번 둘러보길 바란다. (링크)

  • 💀 "모던 CSS가 SPA를 죽일 때가 되었다"는 다소 도발적인 글을 공유해 본다. 그동안 웹사이트를 "앱처럼 매끄럽게" 만들려고 React 같은 SPA를 썼는데, 이제는 단 몇 줄의 CSS만으로 페이지간 애니메이션을 지원하기 때문에 SPA가 필수적이지 않다는 것. 원본에는 보다 자세한 설명이 있으니 관심 있다면 읽어보시길 바란다. 이에 대한 여러분의 의견도 궁금함! (링크)

🔼 니꼬쌤이 알려주는 클로드 꿀팁
 

#클로드 코드 활용법

요즘 가장 핫한 툴을 꼽자면 아무래도 Claude Code(이하 클로드 코드)일 겁니다. 주간 다운로드 수가 무려 360만에 달할 정도로 개발자들 사이에서 엄청난 인기를 끌고 있는데요. 오늘은 클로드 코드가 무엇이고, 어떻게 활용할 수 있는지 니꼬쌤의 실사용 꿀팁을 위주로 소개해 드리겠습니다.

👀 클로드 코드가 뭐임?

명령어 하나로 바로 설치해 사용할 수 있는 에이전틱 코딩 도구입니다. VSCode, Cursor, Windsurf 등 기존 워크플로우 어디서나 바로 사용할 수 있죠. 클로드 코드의 장점은 내 코드에 직접 접근하고, 심지어 Git 히스토리까지 추적하며 작업한다는 것입니다. 마치 함께 일하는 동료 개발자처럼요.

🚀 클로드 코드 시작하기
설치는 간단해요. Node.js가 설치되어 있는 환경에서 터미널에 명령어를 입력하기만 하면 됩니다. 설치 이후 claude를 입력하면 클로드 코드가 바로 실행되는데요. 곧바로 작업을 요청하기 전에 /init 명령어를 먼저 실행해보세요. CLAUDE.md 파일이 생기고, 클로드가 프로젝트를 더 잘 이해하게 돼요. 여기에 자주 쓰는 명령어, 선호하는 코딩 패턴 등을 적어두면 더욱 좋습니다.

🔼 출처: Anthropic

💬 명령어 활용하기

클로드 코드에는 다양한 명령어가 존재하며, 이를 적절히 활용하면 생산성을 높일 수 있습니다.

  • /clear: 대화 기록을 지워주는 명령어에요. 대화가 너무 길어졌거나, 다른 주제나 기능으로 넘어가려 할 때 사용합니다.

  • /model: 사용할 모델을 바꾸는 명령어에요. 가장 강력한 모델인 Opus만 쓰도록 설정할 수 있지만 금방 제한에 도달할 수 있습니다.

  • /compact: 대화 기록은 정리하면서도 그 내용을 요약해서 컨텍스트로 남겨줘요.

커맨드 디렉토리에 직접 명령어를 추가할 수도 있습니다. 니꼬쌤이 매일 사용하는 커스텀 명령어 3개를 알려드릴게요!

  • /cleanup: "$ARGUMENTS를 살펴보고, 남아 있는 디버그 로그, 주석 처리된 코드, 안 쓰는 import들을 정리해줘."

  • /explain: "$ARGUMENTS가 어떻게 작동하는지 신입 개발자한테 설명하듯 알려줘. 실행 흐름이랑 사용 예시도 보여줘."

  • /review: "$ARGUMENTS 코드에서 버그, 보안 문제, 성능 이슈가 있는지 리뷰해줘. 어떤 문제가 생길 수 있는지 구체적으로 알려줘."

🔼 커스텀 명령어에 인자(argument)도 넣을 수 있음!

🍯 유용한 기능들

  • 컨텍스트 불러오기: @를 통해 파일이나 디렉토리를 불러올 수 있어요.

  • 이미지 업로드: shift 키를 누른 상태로 드래그 앤 드롭하여 이미지를 업로드할 수 있습니다. 디자인 작업에 유용해요.

  • 대화 제어: 가끔 Claude가 이상한 방향으로 갈 때가 있는데요. 이때 Ctrl+C 대신 Escape 키를 누르세요. 한 번 누르면 Claude를 멈추고, 두 번 누르면 이전 메시지로 돌아가서 대화를 이어갈 수 있습니다.

  • MCP: 클로드 코드는 MCP를 지원해요. 예를 들어 Playwright에게 디자인 이미지를 준 뒤에, UI를 만들게 하면 스스로 스크린샷을 찍어가며 반복 수정하게 할 수 있죠. Context7를 추가하여 항상 최신 문서를 참고하게 할 수도 있습니다.

  • 서브 에이전트: 나만의 서브 에이전트를 생성해 보세요. '코드 리뷰 에이전트', 'UX 디자인 에이전트', '보안 에이전트' 등을 만들어 각자의 임무를 수행하게 하면 성능을 더욱 끌어올릴 수 있답니다.

이 밖에도 심화 명령어 등의 추가 기능을 제공하는 슈퍼 클로드(Super Claude), 워크트리 병렬 작업을 도와주는 클로드 스쿼드(Claude Squad) 같은 툴을 활용해 생산성을 극대화할 수도 있어요. 여러분은 클로드 코드를 어떻게 사용하고 계신가요? 클로드 코드 사용 꿀팁이 있다면 저희에게도 공유해 주세요!


👉 클로드 코드 꿀팁 공유하기
👉 니꼬쌤 유튜브 영상으로 보기

해당 뉴스레터 전체를 읽고싶다면?

📌 뉴스레터 전문 읽기

뉴스레터 구독은?

📌 뉴스레터 구독하기