Transformer속 핵심 Attension 시뮬레이션(with YangPhago)

<head>
  <meta charset="UTF-8" />
  <title>Transformer 어텐션(Attention) 원리 8단계 시뮬레이션 | 양파고</title>
  <meta
    name="description"   content="복잡한 수식은 그만! 트랜스포머의 핵심 'Self-Attention' 메커니즘을 8단계 시뮬레이션으로 직접 체험하세요. 인코더-디코더부터 Q, K, V 연산, 멀티헤드 어텐션까지 눈으로 보며 이해하는 인터랙티브 학습 사이트입니다."   />
  <meta name="keywords" content="Transformer Attention, 트랜스포머 어텐션 원리, Self-Attention 시각화, 딥러닝 시뮬레이션, Q K V 설명, 멀티헤드 어텐션, NLP 기초, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <meta   property="og:title"   content="Transformer 어텐션(Attention) 원리 8단계 시뮬레이션"  />
  <meta  property="og:description" content="이거 만드는데 코파일럿이랑 2일 걸렸습니다. 트랜스포머 '어텐션' 개념, 글로만 배우다 포기하셨나요? 이제 웹에서 직접 클릭하며 Q, K, V가 어떻게 섞이는지 눈으로 확인하세요! (설치 필요 없음), 양파고, Yang Phago, 노션, 양파고 노션"  />
  <meta property="og:image" content="https://prod-files-secure.s3.us-west-2.amazonaws.com/9f3c9c6b-c056-484e-9466-231ab1f2008a/9a35e240-d6a4-47f0-b432-7a6b6252129f/free-icon-ai-8131880.png" />
  <meta property="og:url" content="https://yangphago.oopy.io/24c62b09-b72b-8011-82c3-dcb12ddeeff1" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 AI와 함께 코딩, 개노다로 2일간 약 30시간을 투자해 만든 한국인을 위한 Attension 메카니즘 체험시뮬레이션(코파일럿이 짱

</aside>

-원래는 클로드의 아티팩트나 구글 제미나이 캔버스로 구현하려고 했으나 코드가 3000줄이 넘어가는 관계로 코파일럿으로 구현 후, 깃허브 탑재

🤖 어텐션 8단계 시뮬레이션_Made By Yangphago(with Copilot)

[참고문헌]

https://towardsdatascience.com/transformers-explained-visually-part-1-overview-of-functionality-95a6dd460452/
https://velog.io/@shparksue/CS224n-Transformers-%EC%85%80%ED%94%84-%EC%96%B4%ED%85%90%EC%85%98-%EB%A9%80%ED%8B%B0-%ED%97%A4%EB%93%9C-%EC%96%B4%ED%85%90%EC%85%98-%ED%8F%AC%EC%A7%80%EC%85%94%EB%84%90-%EC%9E%84%EB%B2%A0%EB%94%A9-%EB%93%B1
https://bigdaheta.tistory.com/67
https://modulabs.co.kr/blog/introducing-attention
https://skyil.tistory.com/256

[코드 전체]