World Weather | ์ธ๊ณ์ ๋ ์จ
World Map: Shows each city on a world map drawn with d3-geo, colored by current temperature (blue = cold โ red = hot). Clicking a city displays it in the detail panel.
City Chips: Lists all cities as chips along with their current temperature, so you can quickly select one.
Current Weather detail: Shows the selected city's current temperature, feels-like temperature, humidity, and wind speed with icons, along with a 24-hour temperature graph for today and a 7-day high/low temperature bar chart.
Compare Cities: Compares the current temperature of all cities in a sorted bar chart.
Language selector: In the top right, you can switch between English / Franรงais / ํ๊ตญ์ด / ๆฅๆฌ่ช / ไธญๆ โ this switches all UI text, weather condition descriptions, and even city names.
๋ ์จ ์ ๋ณด
๐บ ๋์ ํํฉ โ ์์ธยท๋ถ์ฐยท์ธ์ฒยท๋๊ตฌยท๋์ ยท๊ด์ฃผยท์์ยท์ธ์ฐยท์ ์ฃผยท์ถ์ฒ 10๊ฐ ๋์์ ์ค์๊ฐ ๋ ์จ ์นด๋. ๊ธฐ์จ๋ณ ์์ ๊ตฌ๋ถ(๋นจ๊ฐ=๋์/๋
ธ๋=๋ฐ๋ป/์ด๋ก=์พ์ /ํ๋=์ ์ ), ๋ ์จ ์์ด์ฝ ์ ๋๋ฉ์ด์
. ํญ์ผยท์ฒ๋ฅยท๊ณ ์ต๋ ๊ฒฝ๋ณด ์๋ ํ์.
๐ ์์ธ ๋ถ์ โ ์ ํ ๋์์ 64px ๋ํ ๊ธฐ์จ ํ์, 7๊ฐ์ง ์ธ๋ถ ์งํ(์ฒด๊ฐยท์ต๋ยท๊ธฐ์ยท๋ฐ๋ยทํํฅยท๊ตฌ๋ฆยท๊ฐ์๊ฑฐ๋ฆฌ). ์๊ฐ๋ณ ์๋ณด ์คํฌ๋กค, 24์๊ฐ ๊ธฐ์จ ์ถ์ด ๊ทธ๋ํ, ๊ฐ์ ํ๋ฅ ๋ง๋ ์ฐจํธ, ๋ฐ๋ ์ธ๊ธฐ ๋ฉด์ ์ฐจํธ.
๐
์ฃผ๊ฐ ์๋ณด โ 7์ผ ์๋ณด ๋ฆฌ์คํธ(์ต์ /์ต๊ณ ์จ๋ ๋ฐ ํฌํจ), ์ฃผ๊ฐ ์ต์ ยท์ต๊ณ ๊ธฐ์จ ๊บพ์์ ๊ทธ๋ํ(๋นจ๊ฐ=์ต๊ณ , ํ๋=์ต์ ), ์ผ๋ณ ๊ฐ์ ํ๋ฅ ๋ง๋ ์ฐจํธ.
๐พ ๋ ์จ ์ง๋ โ Canvas๋ก ๊ทธ๋ฆฐ ํ๊ตญ ์ง๋ ์์ ๋์๋ณ ๊ธฐ์จ ์์ ์ ํ์. ๋ง์ฐ์ค ์ค๋ฒ ์ ํดํ, ํด๋ฆญ ์ ๋์ ์ ํ. ์๋๊ถยท๊ฐ์ยท์ถฉ์ฒญยท๊ฒฝ์ยท์ ๋ผยท์ ์ฃผ ์ง์ญ๋ณ ํ๊ท ๊ธฐ์จ ์์ฝ.
โ๏ธ ๋์ ๋น๊ต โ ๊ธฐ์จ ์์ ํ
์ด๋ธ(๊ธยท์ยท๋ ๋ฉ๋ฌ ๋ฐฐ์ง), ๊ธฐ์จยท์ต๋ ์ํ ๋ง๋ ์ฐจํธ ๋น๊ต.
AI ์์ด์ ํธ ๋์๋ณด๋
AI Agent Dashboard โ ์ค์๊ฐ ์์ด์ ํธ ๋ชจ๋ํฐ๋ง, ํ์คํฌ ํ, ์ฑ๋ฅ ์งํ, ์ด๋ฒคํธ ๋ก๊ทธ๋ฅผ ํ ํ๋ฉด์. ์ธํฐ๋ํฐ๋ธ ์๋ฎฌ๋ ์ด์
์ผ๋ก ๋ฐ์ดํฐ๊ฐ ์ด์์๋ ๋๋.
์๊ฐํ ๊ตฌ์ฑ:
1. ์๋จ KPI ์นด๋ โ ํ์ฑ ์์ด์ ํธ, ์ฒ๋ฆฌ ํ์คํฌ, ์ฑ๊ณต๋ฅ , ํ๊ท ์๋ต์๊ฐ
2. ์์ด์ ํธ ์ํ ๊ทธ๋ฆฌ๋ โ ๊ฐ ์์ด์ ํธ๋ณ ์ํ/๋ถํ/๋ชจ๋ธ ํ์
3. ์ค์๊ฐ ํ์คํฌ ํ โ ์งํ์ค/๋๊ธฐ/์๋ฃ ํ์คํฌ ๋ฆฌ์คํธ
4. ์ฑ๋ฅ ์ฐจํธ โ Canvas ๊ธฐ๋ฐ ๋ผ์ธ ์ฐจํธ (์๋ต์๊ฐ ์ถ์ด)
5. ์ด๋ฒคํธ ๋ก๊ทธ โ ํ์์คํฌํ + ๋ ๋ฒจ๋ณ ์ค์๊ฐ ์คํธ๋ฆฌ๋ฐ
6. ๋ชจ๋ธ ์ฌ์ฉ ๋ถํฌ โ ๋๋ ์ฐจํธ
๐ฎ Tarot ยท Daily Message
ํ๋ก์นด๋๋ ์ด 78์ฅ์ ๊ทธ๋ฆผ ์นด๋๋ก ์ด๋ฃจ์ด์ง ์ค๋๋ ์์ง ๋๊ตฌ์์. ๋ฏธ๋๋ฅผ ํ์ ์ ์ผ๋ก ์์ธํ๊ธฐ๋ณด๋ค, ์ง๊ธ ๋ด๊ฐ ์ฒํ ์ํฉ๊ณผ ๋ง์ ์ํ๋ฅผ ๋ค๋ฅธ ๊ฐ๋์์ ๋ฐ๋ผ๋ณผ ์ ์๋๋ก ๋์์ฃผ๋ ์ญํ ์ ํด์.
์ค๋ ๋ฝ์ ์นด๋๊ฐ ์ ๋ต์ ์๋ ค์ฃผ๋ ๊ฒ์ ์๋์์. ๊ทธ๋ณด๋ค๋ ์ ์ ๋ฉ์ถฐ์ ์ค์ค๋ก๋ฅผ ๋์๋ณด๊ฒ ํ๋ ์์ ์ง๋ฌธ์ด๋ผ๊ณ ์๊ฐํ๊ณ ํธํ๊ฒ ์ฆ๊ฒจ๋ณด์ธ์.
๐ ๊ธ์ด ์ผ๋ง๋ ์ฝ๊ฒ ์ฝํ๊ณ ์ดํด๋๋์ง..
์ฃผ์ ๊ธฐ๋ฅ
์
๋ ฅ์ฐฝ์ ํ์ดํํ๋ฉด 120ms ๋๋ฐ์ด์ค๋ก ์ฆ์ ์ฌ๊ณ์ฐ (๋ณ๋ ๋ฒํผ ์์ด ์ค์๊ฐ)
๊ฒ์ด์ง: ํ๋(๋ฌด๊ฑฐ์/์ด๋ ค์) โ ํ๊ฐ์(๋ณดํต) โ ์ฃผํฉ(๊ฐ๋ฒผ์/์ฌ์) ๊ทธ๋ผ๋ฐ์ด์
์๋ฅผ ๋ฐ๋์ด ์ด๋
์ ์(0~100), ๋ฑ๊ธ(๋งค์ฐ ์ฌ์~๋งค์ฐ ์ด๋ ค์), ์ค๋ช
๋ฌธ๊ตฌ ํจ๊ป ํ์
๋ฌธ์ฅ ์ / ํ๊ท ๋ฌธ์ฅ ๊ธธ์ด / ํ๊ท ์ด์ ๊ธธ์ด / ๊ธด ๋ฌธ์ฅ ๋น์จ ์งํ ์นด๋
๋ณธ๋ฌธ ์๋์ ์ ๋
๊ธธ๊ฑฐ๋ ๋ฌด๊ฑฐ์ด ๋ฌธ์ฅ์ ๋ฐ์ค ์์ผ๋ก ํ์
๋ฌธ์ฅ๋ณ ๊ฐ์ ์ ์จ๋
์ฃผ์ ๊ธฐ๋ฅ
๋ฌธ์ฅ ์๋ ๋ถ๋ฆฌ + ๋ด์ฅ ํ๊ตญ์ด ๊ฐ์ฑ ์ดํ ์ฌ์ ์ผ๋ก ์ ์ ๊ณ์ฐ (๋ถ์ ์ด "์/๋ชป/์" ๋ฐ์ , "๋งค์ฐ/๋๋ฌด/์ ๋ง" ๋ฑ ๊ฐ์กฐ์ด ๊ฐ์ค์น ์ฒ๋ฆฌ)
๊ฐ ๋ฌธ์ฅ์ ์์ ๋ฐ์ค + ์ ์ ๋ฐฐ์ง ํ์
์๋จ ๊ฐ์ ์คํํธ๋ผ ๋ฐ์ ํ๊ท ์ ์ ๋ง์ปค ํ์
๊ธ์ /์ค๋ฆฝ/๋ถ์ ๋ฌธ์ฅ ์ ์์ฝ ๋ฐ ๋ถํฌ ๋ง๋
Optical illusion
๐ Rotating Rings โ Stare at the centre and the concentric ring pattern appears to physically rotate. High-contrast luminance steps misfiring motion-detector cells in your peripheral vision โ a Peripheral Drift effect.
๐งฑ Cafรฉ Wall โ Perfectly parallel horizontal lines appear to converge like trapezoids. The grey mortar joints between offset black-and-white tiles confuse orientation-selective neurons. Row offset and mortar thickness are both adjustable.
โฌ Hermann Grid โ Grey ghost dots appear at the intersections between white squares, then vanish when you look directly at them. Caused by lateral inhibition in the retinal ganglion cells.
๐ Spinning Dancer โ The silhouette dancer can be seen spinning either clockwise or counterclockwise. Focus on the foot or the shadow to flip the perceived direction of rotation.
โญ Ebbinghaus Illusion โ Two identical circles look different in size depending on the size of the surrounding circles. A slider controls the surround size so you can strengthen or weaken the effect.
โ๏ธ Mรผller-Lyer โ Identical line segments look different in length depending on the direction of the arrowheads. Arrowhead size and line length are both adjustable. An "EQUAL" bracket on the right confirms the lines are the same.
๐บ Rubin's Vase โ The image can be read as either a white vase or two faces looking at each other. A classic figureโground illusion where both interpretations compete inside the brain.
๐ง Motion Aftereffect โ Stare at the flowing stripes on the left for 20 seconds, then shift your gaze to the static grid on the right โ the grid will appear to drift in the opposite direction. A static demonstration of the Waterfall Illusion.
๐ฒ Simultaneous Contrast โ Two squares of identical grey (RGB 128) look dramatically different in brightness depending on the background behind them. A BG contrast slider lets you tune the strength of the effect.
โก Scintillating Grid โ White dots at intersections seem to flicker and disappear as your eyes move across the pattern. An enhanced version of the Hermann Grid, with adjustable square size, gap, and dot radius.
๐ฆ Necker Cube โ A wire-frame cube appears to project outward in two different directions, and your perception flips as you stare at it. The brain alternates between two equally valid 3D interpretations in the absence of depth cues.
๐ Troxler's Fading โ Fix your gaze on the central cross without moving your eyes and the surrounding coloured ring slowly fades and disappears. Neural adaptation reduces the brain's response to unchanging stimuli โ revealing how much of your visual field is actively ignored.
๐ฝ AI Creator
Freedom to Create.
Your idea. Your creation. Your freedom.
๋จ๋
๊ถํฉ ํ
์คํธ HTML
์ด๋ฆ, ์์ผ, ์ฑํฅ์ ์
๋ ฅํ๋ฉด ๋ ์ฌ๋์ ๊ถํฉ ์ ์์ ์ฐ์ ์คํ์ผ์ ๋ณด์ฌ๋๋ฆฝ๋๋ค.
์ธ๋ฅ์ ์ฐ์ฃผ์ ๋ํ ๋์
๋ฐคํ๋์ ๋ฐ๋ผ๋ณด๋ ํธ๊ธฐ์ฌ์ ๋ก์ผ์ด ๋์๊ณ , ์์ ๋ฐ๊ฑธ์์ ๋ฌ๊ณผ ํ์ฑ, ๋ ๋จผ ๋ณ์ ํฅํ ๋์ ์ด ๋์์ต๋๋ค. ์ฐ์ฃผ๋ ์ธ๋ฅ๊ฐ ํ๊ณ๋ฅผ ๋์ด์๋ ๊ฐ์ฅ ๊ฑฐ๋ํ ๋ฌด๋์
๋๋ค.