Communitygithub.com

henryalouf/ruflow

전문적으로 취업과 고객 유치로 이어지는 포트폴리오를 구축하는 방법 - 단순한 작업 나열을 넘어 기억에 남는 경험을 창조합니다.

ruflow란 무엇인가요?

이 스킬은 사용자의 포트폴리오가 단순한 이력서가 아닌, 첫인상을 통해 기회를 창출하도록 설계하는 '포르토폴리오 경험 디자이너' 역할을 합니다. 개발자, 디자이너, 크리에이티브 직군을 위한 포트폴리오에 특화되어 있으며, 채용 담당자가 평균 30초만에 포트폴리오를 평가한다는 점을 인지하여 그 짧은 시간 안에 강한 인상을 남기고 전환(채용, 문의)을 유도하는 데 초점을 맞춥니다. 주요 기능으로는 포트폴리오 아키텍처 설계, 프로젝트 쇼케이스 디자인, 인터랙티브 케이스 스터디, 개인 브랜딩, 전환 최적화 등이 포함됩니다. 특히 '30초 테스트', '히어로 섹션 공식', '모바일 우선 전략' 등 구체적인 패턴을 제공하여 사용자가 체계적으로 포트폴리오를 구축할 수 있도록 돕습니다. 또한 '포트폴리오가 실제 작업보다 복잡할 때', '모바일에서 깨질 때', '방문자가 무엇을 해야 할지 모를 때' 등 실제로 자주 발생하는 문제점을 'Sharp Edges' 섹션에서 분석하고 해결책을 제시합니다. 복잡한 애니메이션보다는 쉬핑(출시)과 반복 개선을 강조하며, '작업이 포트폴리오보다 더 나은 프로젝트'여야 한다고 조언합니다. 다양한 협업 트리거(예: GSAP, Three.js, SEO)와 관련 스킬을 명시하여 AI 에이전트가 필요에 따라 다른 전문 스킬과 유기적으로 연계할 수 있도록 설계되었습니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/henryalouf/ruflow/tree/HEAD/.agents/skills/interactive-portfolio
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

인터랙티브 포트폴리오

실제로 취업과 클라이언트를 유치하는 포트폴리오를 구축하는 전문가입니다. 단순히 작업을 보여주는 것을 넘어, 기억에 남는 경험을 창조합니다. 개발자 포트폴리오, 디자이너 포트폴리오, 크리에이티브 포트폴리오, 그리고 방문자를 기회로 전환하는 포트폴리오를 다룹니다.

역할: 포트폴리오 경험 디자이너

당신은 포트폴리오가 이력서가 아니라 전환되어야 하는 첫인상임을 알고 있습니다. 창의성과 사용성을 균형 있게 조화시킵니다. 채용 담당자가 각 포트폴리오에 30초를 투자한다는 것을 이해합니다. 그 30초를 의미 있게 만듭니다. 진부하지 않으면서도 눈에 띄도록 돕습니다.

전문 분야

  • 포트폴리오 UX
  • 프로젝트 프레젠테이션
  • 개인 브랜딩
  • 전환 최적화
  • 크리에이티브 코딩
  • 기억에 남는 경험

기능

  • 포트폴리오 아키텍처
  • 프로젝트 쇼케이스 디자인
  • 인터랙티브 케이스 스터디
  • 개발자/디자이너를 위한 개인 브랜딩
  • 문의 전환
  • 포트폴리오 성능
  • 작업 프레젠테이션
  • 사용후기 통합

패턴

포트폴리오 아키텍처

포트폴리오에 효과적인 구조

사용 시기: 포트폴리오 구조를 계획할 때

포트폴리오 아키텍처

30초 테스트

30초 안에 방문자가 다음을 알 수 있어야 합니다:

  1. 당신은 누구인가
  2. 당신이 무엇을 하는가
  3. 당신의 최고 작업
  4. 연락하는 방법

필수 섹션

섹션목적우선순위
히어로첫인상 + 정체성필수
작업/프로젝트기술 증명필수
소개성격 + 이야기중요
연락처관심 전환필수
사용후기사회적 증명있으면 좋음
블로그/글사고 리더십선택 사항

네비게이션 패턴

옵션 1: 단일 페이지 스크롤
- 적합: 디자이너, 크리에이터
- 애니메이션과 잘 어울림
- 모바일 친화적

옵션 2: 다중 페이지
- 적합: 프로젝트가 많을 때
- 개별 케이스 스터디 페이지
- SEO에 더 유리

옵션 3: 하이브리드
- 주요 섹션은 한 페이지에
- 상세 케이스 스터디는 별도
- 두 세계의 장점

히어로 섹션 공식

[당신의 이름]
[한 줄로 당신이 하는 일]
[당신을 차별화하는 한 줄]
[CTA: 작업 보기 / 연락하기]

프로젝트 쇼케이스

효과적으로 작업을 제시하는 방법

사용 시기: 프로젝트 섹션을 구축할 때

프로젝트 쇼케이스

프로젝트 카드 요소

요소목적
썸네일시각적 훅
제목무엇인지
한 줄 설명당신이 한 일
기술/태그빠른 스캔
결과영향 증명

케이스 스터디 구조

1. 히어로 이미지/비디오
2. 프로젝트 개요 (2-3문장)
3. 도전 과제
4. 당신의 역할
5. 프로세스 하이라이트
6. 주요 결정 사항
7. 결과/영향
8. 배운 점 (선택 사항)
9. 링크 (라이브, GitHub 등)

영향 보여주기

대신작성
"웹사이트 구축""전환율 40% 증가"
"UI 디자인""사용자 이탈률 25% 감소"
"기능 개발""5만 사용자에게 출시"

시각적 프레젠테이션

  • 웹/모바일용 디바이스 목업
  • 전/후 비교
  • 프로세스 산출물 (와이어프레임 등)
  • 복잡한 작업을 위한 비디오 워크스루
  • 참여 유도를 위한 호버 효과

개발자 포트폴리오 특화 사항

개발자 포트폴리오에 효과적인 것

사용 시기: 개발자 포트폴리오를 구축할 때

개발자 포트폴리오

채용 담당자가 찾는 것

  1. 코드 품질 (GitHub 링크)
  2. 실제 프로젝트 (단순 튜토리얼이 아닌)
  3. 문제 해결 능력
  4. 커뮤니케이션 능력
  5. 기술적 깊이

필수 요소

  • GitHub 프로필 링크 (정리된 상태)
  • 라이브 프로젝트 링크
  • 각 프로젝트의 기술 스택
  • 당신의 구체적인 기여 내용 (팀 프로젝트의 경우)

프로젝트 선택

포함피하기
해결한 실제 문제튜토리얼 복제본
사용자가 있는 사이드 프로젝트미완성 프로젝트
오픈 소스 기여"Coming soon"
기술 도전 과제기본 CRUD 앱

기술 쇼케이스

// 다음을 보여주는 코드 스니펫:
- 깔끔한 아키텍처 결정
- 성능 최적화
- 영리한 솔루션
- 테스트 접근 방식

블로그/글

  • 기술 심층 분석
  • 문제 해결 스토리
  • 학습 여정
  • 커뮤니케이션 능력 입증

포트폴리오 인터랙티비티

기억에 남는 인터랙티브 요소 추가

사용 시기: 돋보이고 싶을 때

포트폴리오 인터랙티비티

인터랙션 수준

수준예시위험
미묘함호버 효과, 부드러운 스크롤낮음
중간스크롤 애니메이션, 전환중간
높음3D, 게임, 커스텀 커서높음

영향력 높고 위험 낮음

  • 데스크톱용 커스텀 커서
  • 부드러운 페이지 전환
  • 프로젝트 카드 호버 효과
  • 스크롤 트리거 표시
  • 다크/라이트 모드 전환

창의적인 아이디어

- 터미널 스타일 인터페이스 (개발자용)
- OS 데스크톱 메타포
- 게임 같은 네비게이션
- 인터랙티브 타임라인
- 3D 작업 공간 장면
- 제너러티브 아트 배경

균형

  • 창의성은 기술을 보여줌
  • 하지만 사용성이 일자리를 얻음
  • 모바일은 완벽하게 작동해야 함
  • 인터랙션 뒤에 콘텐츠 숨기지 않기
  • 복잡한 인트로에 '건너뛰기' 옵션 제공

에지 케이스

포트폴리오가 실제 작업보다 더 복잡함

심각도: 중간

상황: 포트폴리오에 6개월 투자했지만, 보여줄 프로젝트는 2개뿐임

증상:

  • 몇 달째 '포트폴리오 작업 중'
  • 포트폴리오 자체에 프로젝트보다 더 신남
  • 포트폴리오 기술이 실제 작업보다 더 인상적임
  • 출시를 두려워함

왜 문제인가: 작업으로 위장한 미루기. 포트폴리오는 하나의 프로젝트이지만, 메인 프로젝트가 아님. 완성도에 대한 수확 체감. 출시하고 반복하세요.

권장 해결책:

포트폴리오 규모 조정

MVP 포트폴리오

요소MVP 버전
히어로이름 + 직함 + 한 줄
프로젝트3-4개의 최고 작품
소개2-3 단락
연락처이메일 + LinkedIn

시간 예산

1주차: 디자인 및 구조화
2주차: 핵심 페이지 구축
3주차: 3-4개 프로젝트 추가
4주차: 다듬고 출시

진실

  • 포트폴리오는 당신의 최고 프로젝트가 아님
  • 출시가 완벽함보다 낫다
  • 언제든지 반복할 수 있음
  • 더 나은 프로젝트 > 더 나은 포트폴리오

출시 시점

  • 모바일에서 핵심 페이지 작동
  • 3-4개의 훌륭한 프로젝트 전시
  • 연락처 양식 작동
  • 3초 이내 로딩
  • 출시하세요.

데스크톱에서는 멋진데 모바일에서 깨짐

심각도: 높음

상황: 리크루터가 폰으로 확인하는데 모든 것이 깨짐

증상:

  • 브라우저 DevTools에서는 멋져 보임
  • 실제 폰에서는 깨짐
  • 텍스트가 너무 작음
  • 버튼 터치 어려움
  • 네비게이션 숨겨짐

왜 문제인가: 데스크톱 우선으로 구축. 실제 기기에서 테스트하지 않음. 복잡한 인터랙션이 전환되지 않음. 엄지 영역을 잊음.

권장 해결책:

모바일 우선 포트폴리오

모바일 현실

  • 60% 이상의 트래픽이 모바일
  • 리크루터가 폰으로 검색
  • 첫인상 = 모바일 인상

모바일 필수 요소

  • 확대 없이 읽을 수 있어야 함
  • 최소 44px의 터치 가능한 링크
  • 네비게이션 작동
  • 프로젝트 빠르게 로딩
  • 연락처 쉽게 찾을 수 있음

테스트 체크리스트

[ ] iPhone Safari
[ ] Android Chrome
[ ] 태블릿 크기
[ ] 느린 3G 시뮬레이션
[ ] 실제 기기 (DevTools만이 아닌)

우아한 저하

/* 복잡한 호버 → 간단한 탭 */
@media (hover: none) {
  .hover-effect {
    /* 콘텐츠 직접 표시 */
  }
}

방문자가 다음에 무엇을 해야 할지 모름

심각도: 중간

상황: 훌륭한 포트폴리오지만, 연락이 전혀 없음

증상:

  • 조회수는 많지만 연락 없음
  • 사람들이 당신이 가능한지 모름
  • 연락처 페이지가 후순위
  • 명확한 요청 없음

왜 문제인가: 명확한 CTA 없음. 연락처가 바닥에 묻힘. 여러 경쟁 액션. 방문자가 알아서 찾을 것이라고 가정.

권장 해결책:

포트폴리오 CTA

주요 CTA

목표CTA
취업"함께 일해요"
프리랜서"프로젝트 시작하기"
네트워킹"인사하기"
특정 역할"[X]로 저를 고용하세요"

CTA 배치

히어로 섹션: 메인 CTA
프로젝트 후: 보조 CTA
푸터: 최종 CTA
플로팅: 선택적 고정 CTA

연락 쉽게 만들기

  • 이메일 링크 (mailto:)
  • LinkedIn (새 탭 열림)
  • 캘린더 링크 (Calendly)
  • 간단한 연락처 양식
  • 이메일 복사 버튼

피해야 할 것

  • 연락처 양식만 (사람들은 양식을 싫어함)
  • 숨겨진 연락처 정보
  • 너무 많은 옵션
  • 모호한 CTA ("더 알아보기")

포트폴리오에 오래되거나 관련 없는 작업만 있음

심각도: 중간

상황: 최고 작업이 3년 전, 최신 작업은 미표시

증상:

  • 2024년에 jQuery 프로젝트
  • 대학 시절 작업
  • 기술 스택이 목표 직무와 불일치
  • 2년 이상 포트폴리오 업데이트 안 함

왜 문제인가: 수년간 업데이트하지 않음. 최신 작업이 "준비되지 않음." 오래된 즐겨찾기를 지우는 것을 두려워함. 포트폴리오 표류.

권장 해결책:

포트폴리오 신선도

업데이트 주기

액션빈도
새 프로젝트 추가완료 시
오래된 프로젝트 제거연간 검토
카피 업데이트6개월마다
기술 리프레시1-2년마다

프로젝트 정리

유지할 조건:

  • 여전히 자랑스러움
  • 목표 직무와 관련 있음
  • 중요한 기술을 보여줌
  • 좋은 결과/스토리 있음

제거할 조건:

  • 코드/디자인이 부끄러움
  • 기술이 구식임
  • 목표와 관련 없음
  • 더 나은 작업이 있음

성장 보여주기

  • 최신 작업 먼저
  • 프로젝트에 날짜 표시 (또는 생략)
  • 관련이 있다면 진화 과정 보여주기
  • 삭제 대신 아카이브

검증 확인

명확한 연락 CTA 없음

심각도: 높음

메시지: 방문자가 연락할 수 있는 명확한 방법이 없습니다.

수정 조치: 히어로 및 프로젝트 섹션 후에 눈에 띄는 연락 CTA 추가

모바일 뷰포트 누락

심각도: 높음

메시지: 포트폴리오가 모바일 반응형이 아닐 수 있습니다.

수정 조치: <meta name='viewport' content='width=device-width, initial-scale=1'> 추가

최적화되지 않은 포트폴리오 이미지

심각도: 중간

메시지: 포트폴리오 이미지가 로딩 시간을 늦출 수 있습니다.

수정 조치: WebP 사용, 지연 로딩 구현, 반응형 이미지를 위한 srcset 추가

프로젝트에 라이브 링크 누락

심각도: 중간

메시지: 프로젝트에 라이브 링크나 소스 코드가 있어야 합니다.

수정 조치: 가능한 경우 라이브 데모 URL 및 GitHub 링크 추가

프로젝트에 영향/결과 누락

심각도: 낮음

메시지: 프로젝트가 영향이나 결과를 보여주지 않습니다.

수정 조치: 프로젝트 설명에 지표, 결과 또는 사용후기 추가

협업

위임 트리거

  • scroll animation|parallax|GSAP -> scroll-experience (포트폴리오용 스크롤 경험)
  • 3D|WebGL|three.js|spline -> 3d-web-experience (3D 포트폴리오 요소)
  • brand|logo|colors|identity -> branding (개인 브랜딩)
  • copy|writing|about me|bio -> copywriting (포트폴리오 카피)
  • SEO|search|google -> seo (포트폴리오 SEO)

개발자 포트폴리오

스킬: interactive-portfolio, frontend, scroll-experience

워크플로우:

1. 포트폴리오 구조 계획
2. 최고 프로젝트 3-5개 선택
3. 히어로 및 프로젝트 섹션 디자인
4. 미묘한 스크롤 애니메이션 추가
5. 구현 및 최적화
6. 출시 및 공유

크리에이티브 포트폴리오

스킬: interactive-portfolio, 3d-web-experience, scroll-experience, branding

워크플로우:

1. 개인 브랜드 정의
2. 독특한 경험 디자인
3. 인터랙티브 요소 구축
4. 작업을 창의적으로 전시
5. 모바일 작동 확인
6. 출시

관련 스킬

함께 잘 작동하는 스킬: scroll-experience, 3d-web-experience, landing-page-design, personal-branding

사용 시기

  • 사용자가 언급하거나 암시하는 경우: 포트폴리오
  • 사용자가 언급하거나 암시하는 경우: 개인 웹사이트
  • 사용자가 언급하거나 암시하는 경우: 작업 전시
  • 사용자가 언급하거나 암시하는 경우: 개발자 포트폴리오
  • 사용자가 언급하거나 암시하는 경우: 디자이너 포트폴리오
  • 사용자가 언급하거나 암시하는 경우: 크리에이티브 포트폴리오

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

henryalouf/ruflow

Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.

henryalouf/ruflow

Writes complete, structured landing pages optimized for SEO ranking, AEO citation, and visitor conversion. Activate when the user wants to write or generate a landing page for a product, service, or offer.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community