λΆ‰μ€κ±°μœ„ / GoOSe

Tweet Automata

아티클 정보

λ‘₯μ§€
Tool & Service
λΆ„λ₯˜
Extra
등둝일
2023-06-13 12:56:59

tweet-automata-001-01.webp

νŠΈμœ„ν„°μ—μ„œ μ–΄λ–€ μΈν„°λž™ν‹°λΈŒ μ• λ‹ˆλ©”μ΄μ…˜μ„ 보고 μ΄μƒν•˜λ¦¬λ§ŒμΉ˜ 자꾸 λ³΄κ²Œλ˜μ—ˆλ‹€.
μ΄λ ‡κ²Œ μΈν„°λž™ν‹°λΈŒ κ°œλ°œμ„ κΏˆκΏ”μ˜€κ³€ ν–ˆλŠ”λ° μ—¬νƒœκΉŒμ§€ μ œλŒ€λ‘œ μ‹€ν–‰ν•˜μ§€ λͺ»ν•˜κ³  μžˆμ—ˆλŠ”λ° 이건 ν•œλ²ˆ λ§Œλ“€μ–΄λ³Όλ§Œν•˜κ² λ‹€ μ‹Άμ—ˆλ‹€.

νŠΈμœ„ν„°μ—μ„œ λ³Έ 링크
https://leanderherzog.ch/2015/stream/

이것은 html νŽ˜μ΄μ§€λ‘œ λ§Œλ“œλŠ”κ²Œ 더 λ‚«κ² λ‹€λŠ” λͺ¨μŠ΅μ΄μ–΄μ„œ ν˜„μž¬ μ΅μˆ™ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλŠ” 기술둜 μ œμž‘μ„ μ‹œμž‘ν•˜κ³ μž λ§ˆμŒλ¨Ήμ—ˆλ‹€.

ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€κ³ μž κ²°μ‹¬ν•˜κ³  SNS λͺ©μ—…UI μ•„νŠΈ 포슀트λ₯Ό μž‘μ„±ν•˜κ³  μ–΄λ–»κ²Œ λ§Œλ“€μ§€μ— λŒ€ν•˜μ—¬ μƒκ°λ‚˜λŠ”λŒ€λ‘œ μ μ–΄λ‘μ—ˆλ‹€.

이름 μ •ν•˜κΈ°

처음 ꡬ상할 λ‹Ήμ‹œμ—λŠ” νŠΈμœ—κ°™μ΄ 생긴 μΉ΄λ“œκ°€ μžλ™μœΌλ‘œ λ§Œλ“€μ–΄μ£ΌλŠ” λͺ¨μŠ΅μ„ 연상할 수 있기 λ•Œλ¬Έμ— TweetλΌλŠ” 이름을 μ‚¬μš©ν• κΉŒ μ‹Άμ—ˆλ‹€.
그리고 μžλ™μœΌλ‘œ λ§Œλ“€μ–΄μ£ΌλŠ” 무언가λ₯Ό μƒκ°ν•˜λ‹€κ°€ μ˜€ν† λ©”μ΄μ…˜κ°™μ€ 단어λ₯Ό λ– μ˜¬λ¦¬λ‹€ μ˜€ν† λ§ˆνƒ€λΌλŠ” 단어λ₯Ό λ– μ˜¬λ¦¬κ³  κ²€μƒ‰ν•΄λ³΄λ‹ˆ λ‹€μŒκ³Ό 같은 의미둜 λ‚˜μ™€μ„œ λ§ˆμŒμ— λ“€μ—ˆλ‹€.

λ‘œλ΄‡ λ˜λŠ” μžλ™κΈ°κ³„λΌκ³ λ„ ν•œλ‹€. 어원은 μžλ™κΈ°κ³„λΌλŠ” 뜻의 κ·Έλ¦¬μŠ€μ–΄μ΄λ‹€.
일반적으둜 기계에 μ˜ν•˜μ—¬ λ™μž‘ν•˜λŠ” μžλ™μΈν˜•μ΄λ‚˜ 동물, λ‚˜μ•„κ°€μ„œ μžλ™μž₯치λ₯Ό λ§ν•˜λ©°, μˆ˜ν•™μ μœΌλ‘œ μΆ”μƒν™”λœ κ°œλ…μœΌλ‘œ 쓰일 κ²½μš°λ„ μžˆλ‹€.

결과적으둜 Tweet AutomataλΌλŠ” μ΄λ¦„μœΌλ‘œ μ‚¬μš©ν•˜κΈ°λ‘œ ν–ˆλ‹€.

μž‘λ™νλ¦„

νŠΈμœ— μ˜€ν† λ§ˆνƒ€λŠ” μ›Ή λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰λ˜κ³ , νŽ˜μ΄μ§€κ°€ 열리면 λ‹€μŒκ³Ό 같은 κ³Όμ •μœΌλ‘œ μ‹€ν–‰λœλ‹€.

  1. νŽ˜μ΄μ§€κ°€ μ—΄λ¦¬λ©΄μ„œ ν”„λ‘œκ·Έλž¨ μ΄ˆκΈ°ν™”
  2. 컬럼이 λ§Œλ“€μ–΄μ§„λ‹€.
  3. μΉ΄λ“œκ°€ λ§Œλ“€μ–΄μ§€λ©΄μ„œ 이전 μΉ΄λ“œλ“€μ€ λ°€λ €λ‚œλ‹€. (반볡적으둜 μΉ΄λ“œκ°€ λ§Œλ“€μ–΄μ§„λ‹€.)
  4. ν™”λ©΄μ—μ„œ λ„˜μ–΄κ°„ μΉ΄λ“œλŠ” μ‚­μ œλœλ‹€.

tweet-automata-002.webp

μΉ΄λ“œκ°€ λ§Œλ“€μ–΄μ§€λŠ” κ³Όμ •

  1. μΉ΄λ“œλ₯Ό λ§Œλ“€μ–΄λ‹¬λΌλŠ” μš”μ²­
  2. λ ˆμ΄μ•„μ›ƒ νŒ¨ν„΄μ„ 랜덀으둜 ν•˜λ‚˜ λ½‘λŠ”λ‹€.
  3. μΉ΄λ“œμ˜ λ‚΄μš©μ„ μ‘°λ¦½ν•œλ‹€.
  4. μΉ΄λ“œμ˜ 높이가 0인 μƒνƒœλ‘œ μ»¬λŸΌμ— μ§‘μ–΄λ„£λŠ”λ‹€.
  5. 높이λ₯Ό auto둜 λ³€κ²½ν•˜λ©΄μ„œ μ• λ‹ˆλ©”μ΄μ…˜μ΄ μ‹€ν–‰ν•œλ‹€.

μΉ΄λ“œ 컨텐츠 μš”μ†Œ

μΉ΄λ“œμ—λŠ” 이미지, 이름, λ‚ μ§œ, λ‚΄μš© μš”μ†Œλ“€μ΄ λ“€μ–΄κ°„λ‹€. 랜덀으둜 λ‚΄μš©μ΄ λ§Œλ“€μ–΄μ§€κ³  λ ˆμ΄μ•„μ›ƒ 쑰합듀이 λ‹¬λΌμ§ˆ 것이닀.
λ ˆμ΄μ•„μ›ƒμ΄ λ§Œλ“€μ–΄μ§€λŠ” 방식이 μ€‘μš”ν•œ 뢀뢄인데 λžœλ€μ„ μ–΄λ–»κ²Œ λ§Œλ“€μ§€ μ’€ 고민이닀.
κ°€μž₯ μ‰¬μš΄ 방법은 프리셋을 미리 λ§Œλ“€μ–΄λ‘κ³  랜덀으둜 프리셋을 μ„ νƒν•˜λŠ”κ²Œ κ΅¬ν˜„μ— μžˆμ–΄μ„œ κ°€μž₯ μ‰¬μšΈκ²ƒμ΄λ‹€.

썸넀일 이미지

μ‹€μ œ μ΄λ―Έμ§€λ³΄λ‹€λŠ” μ—°ν•„λ‘œ μ‚¬μ„ μœΌλ‘œ κ·Έμ–΄λ‘λŠ” ν‘œν˜„μœΌλ‘œ λ¨Όμ € λ§Œλ“€μ–΄λ‘λŠ”κ²Œ μ’‹κ²Ÿλ‹€.
κΈ‹λŠ” νšŸμˆ˜μ™€ κ΅΅κΈ°, λ†λ„λ‘œ μ—¬λŸ¬ νŒ¨ν„΄μ„ λ§Œλ“€μ–΄ λ‘λŠ”κ²Œ μ’‹κ² λ‹€. λŒ€λž΅ 500x500 μ‚¬μ΄μ¦ˆλ‘œ μ—¬λŸ¬κ°œ λ§Œλ“€μ–΄ cover ν˜•μ‹μœΌλ‘œ μ‚¬μš©ν•˜λŠ”κ²Œ 쒋을거 κ°™λ‹€.
썸넀일 μ΄λ―Έμ§€λŠ” μ—¬λŸ¬κ°€μ§€ μ‚¬μ΄μ¦ˆλ‘œ μ‚¬μš©λ˜κΈ° λ•Œλ¬Έμ— λ²”μš©μ„± μžˆλŠ” ν˜•νƒœλ‘œ λ§Œλ“œλŠ”κ²ƒμ΄ 쒋을 것이닀.

tweet-automata-003.webp

λžœλ€μš”μ†Œ

μ„€μ •κ°’λ“€μ˜ λŒ€λΆ€λΆ„μ„ λžœλ€κ°’μœΌλ‘œ 두어 μ‘°κΈˆμ΄λΌλ„ μ§€λ£¨ν•˜μ§€ μ•Šλ„λ‘ μ€€λΉ„ν•˜λ‹€κ°€ μ²˜μŒμ—λŠ” λ§Žμ€ 것듀을 랜덀으둜 μ‘°μ • κ°€λŠ₯ν•˜κ²Œ λ§Œλ“€μ–΄λ³΄λ‹€κ°€ λžœλ€ν•œ μš”μ†Œλ“€μ„ μ λ‹Ήν•œ μˆ˜μ€€μœΌλ‘œ μ‘°μ •ν–ˆλ‹€.

랜덀으둜 값이 λ§Œλ“€μ–΄μ§€λŠ” μš”μ†ŒλŠ” λ‹€μŒκ³Ό κ°™λ‹€.

  • μΉ΄λ“œ μ• λ‹ˆλ©”μ΄μ…˜ 속도
  • μ• λ‹ˆλ©”μ΄μ…˜ ν”„λ ˆμž„
  • μΉ΄λ“œ λ ˆμ΄μ•„μ›ƒ νŒ¨ν„΄
  • 제λͺ©, μ„€λͺ…, 썸넀일 이미지, λ‚ μ§œ λ‚΄μš©λ“€

ν”„λ‘œκ·Έλž¨ μ œμž‘

κ΅¬μƒν•˜κ³  μ ˆμ°¨λŒ€λ‘œ λ””μžμΈ μž‘μ—…μ„ μ‹œμž‘ν•˜λ €κ³  λ””μžμΈνˆ΄μ„ μ—΄μ–΄μ„œ 쑰금 끄적거리닀가 μž‘μ—… μ‹œκ°„μ— λŒ€ν•˜μ—¬ κ³ λ―Όν•˜λ‹€ λ””μžμΈνˆ΄μ„ 꺼버렸닀.
아주쒋은 λͺ¨μŠ΅μœΌλ‘œ λ‚˜μ˜€μ§€ λͺ»ν•˜κ² μ§€λ§Œ ν”„λ‘œκ·Έλž¨ μž‘μ—…μ„ ν•˜λ©΄μ„œ λ””μžμΈ ν˜•νƒœ μž‘μœΌλ©΄μ„œ λΉ λ₯΄κ²Œ λλ‚΄κ³ μž ν–ˆλ‹€.

μš”μ¦˜μ—λŠ” svelte둜 μž‘μ—…μ„ 많이 ν•˜κ³  μžˆμ–΄μ„œ μ΅μˆ™ν•΄μ§€λ €λŠ” μ΄μœ λ„ 있고, κ°„λ‹¨ν•˜κ²Œ μ»΄ν¬λ„ŒνŠΈ ν˜•νƒœλ‘œ λ­”κ°€λ₯Ό λ§Œλ“œλŠ”λ° svelte도 쒋은 μ„ νƒμ΄μ–΄μ„œ κ°„λ‹¨ν•˜κ²Œ κ°œλ°œμ„€μ •μ„ ν•˜κ³  μ œμž‘μ„ μ‹œμž‘ν–ˆλ‹€.

랜덀 μš”μ†Œμ— λŒ€ν•˜μ—¬ μ²˜μŒμ— λ³΅μž‘ν•˜κ²Œ κ΅¬ν˜„ν•˜λ € ν–ˆμ§€λ§Œ μ˜λ―Έκ°€ μžˆλ‚˜ν•΄μ„œ μ‘°κΈˆμ”© λ‹¨μˆœν•œ ν˜•νƒœλ‘œ ꡬ쑰둜 λ³€κ²½ν•˜λ©΄μ„œ μ–ΌμΆ” μ›ν•˜λŠ” ν˜•νƒœλ‘œ μ§„ν–‰ν–ˆλ‹€.

μ΄λ²ˆμ°Έμ— requestAnimationFrameλ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄μ„œ 적응할 수 μžˆλŠ” 쒋은 κΈ°νšŒκ°€ λ˜μ—ˆλ‹€.
νŠΉμ • 도ꡬ가 μ–΄λ–»κ²Œ λ™μž‘ν•˜λŠ”μ§€λŠ” μžλ£Œλ‚˜ 예제λ₯Ό 보면 금방 μ•Œ 수 μžˆμ§€λ§Œ μ΄ν•΄ν•˜κ³  ν™œμš©ν•  수 있으렀면 많이 μ‚¬μš©ν•΄λ³Ό 수 μžˆμ–΄μ•Ό 할것이닀.

마치며..

μ™ΈλΆ€μ—μ„œ κ°€μ Έμ˜¨ 에셋듀을 가져와 λ§Œλ“€μ–΄λ³Ό 수 μžˆλŠ”κ²ƒλ“€μ΄ λ§Žμ„κ±°λΌ μƒκ°λ˜μ§€λ§Œ μΉ΄λ“œκ°€ λ§Œλ“€μ–΄μ§€λŠ” μ„ μ—μ„œ λ§ˆλ¬΄λ¦¬μ§“κ³  λλ‚΄λŠ”κ²Œ 쒋을거 κ°™μ•„ λͺ‡κ°€μ§€μ˜ 단어와 μ΄λ―Έμ§€λ§Œ λ§Œλ“€μ–΄λ‘κ³  ν•˜μš©ν•˜κ³  λλ§Ίμ—ˆλ‹€.

λ„μ‹œλ‚˜ λ‚˜λΌ μ΄λ¦„μ΄λ‚˜ μ‚¬λžŒμ΄λ¦„, 날씨 같은것듀, 기사듀을 κ°€μ Έμ™€μ„œ 좜λ ₯ν•˜λŠ”κ²ƒλ„ 쒋을거라 μƒκ°λ˜μ§€λ§Œ ν˜„μž¬λŠ” 이정도 μ„ μ—μ„œ λ§Œλ“€μ–΄λ‘κ³  λ‚˜μ€‘μ— 이런 μ»¨μ…‰μœΌλ‘œ λ­”κ°€ λ§Œλ“€μ–΄μ§„λ‹€λ©΄ ν™œμš©ν•  수 μžˆμ„κ²ƒμ΄λ‹€.
μ²˜μŒλΆ€ν„° μž‘μ€ ν”„λ‘œμ νŠΈλ‘œ λ§Œλ“€κΈ°λ‘œ ν–ˆμœΌλ‹ˆ λΉ λ₯΄κ²Œ λλ§ˆμΉœλ‹€.

메타데이터

쑰회수
953
μ’‹μ•„μš”
0