์ฟ ํกยท์ค๋งํธ์คํ ์ดยท์๋ง์กด ์ํ ์ด๋ฏธ์ง ๊ท๊ฒฉ ์์ ์ ๋ฆฌ
์ผํ๋ชฐ ํ๋ซํผ๋ง๋ค ์ํ ๋ํ ์ด๋ฏธ์ง ๊ท๊ฒฉ์ด ๋ค๋ฆ ๋๋ค.์ฟ ํก์ 860ร860px์ ๊ถ์ฅํ๋ฉฐ ์ ์ฌ๊ฐํ ์ด๋ฏธ์ง๊ฐ ๊ฒ์ ๊ฒฐ๊ณผ ๋ ธ์ถ์ ์ ๋ฆฌํฉ๋๋ค.์ค๋งํธ์คํ ์ด๋ 1000ร1000px์ด ํ์ค์ผ๋ก, ๊ณ ํด์๋ ์ด๋ฏธ์ง์ผ์๋ก ์ค์ธ ๊ธฐ๋ฅ์ด ์์ฐ์ค๋ฝ๊ฒ ์๋ํฉ๋๋ค.์๋ง์กด์ 2000ร2000px ์ด์์ ์๊ตฌํ๋๋ฐ, ์ด๋ ์๋ง์กด์ ๋ง์ฐ์ค ์ค๋ฒ ์ค ๊ธฐ๋ฅ(Hover Zoom)์ด ๊ณ ํด์๋์์ ๋ ์ ๋ช ํ๊ฒ ๋ณด์ด๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ํ ์์ธํ์ด์ง ์ด๋ฏธ์ง ์ ์ ์ ์ฃผ์ํ ์
ํ๋ซํผ๋ณ๋ก ๋ฐฐ๊ฒฝ ์ ์ฑ ์ด ๋ค๋ฆ ๋๋ค. ์๋ง์กด ๋ฉ์ธ ์ด๋ฏธ์ง๋ ์์ ํฐ์ ๋ฐฐ๊ฒฝ(#FFFFFF) ํ์์ ๋๋ค. ์ฟ ํก๊ณผ ์ค๋งํธ์คํ ์ด๋ ๋ฐฐ๊ฒฝ ์์ ์ ํ์ด ์์ด ๊ทธ๋ผ๋ฐ์ด์ ์ด๋ ์ปฌ๋ฌ ๋ฐฐ๊ฒฝ๋ ํ์ฉ๋ฉ๋๋ค. ํ ์คํธ ์ค๋ฒ๋ ์ด๋ ๋ฉ์ธ ์ด๋ฏธ์ง๊ฐ ์๋ ์๋ธ ์ด๋ฏธ์ง(์ถ๊ฐ ์ด๋ฏธ์ง)์ ํ์ฉํ๋ฉด ๊ฐ์ฅ ํจ๊ณผ์ ์ ๋๋ค.
์ด ๋๊ตฌ์ ์ฌ์ฉ๋ฒ
- 1๋จ๊ณ: ํ๋งค ํ๋ซํผ(์ฟ ํก/์ค๋งํธ์คํ ์ด/์๋ง์กด)์ ์ ํํฉ๋๋ค.
- 2๋จ๊ณ: ์ํ ์ฌ์ง์ ์ ๋ก๋ํ๊ฑฐ๋ ๋น ๋ฅธ ํ ํ๋ฆฟ์ ์ ์ฉํฉ๋๋ค.
- 3๋จ๊ณ: ๋ฐฐ๊ฒฝ(๋จ์/๊ทธ๋ผ๋ฐ์ด์ /ํจํด)์ ์ ํํ๊ณ ํ ์คํธ ๋ ์ด์ด๋ฅผ ํธ์งํฉ๋๋ค.
- 4๋จ๊ณ: PNG ๋ค์ด๋ก๋ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํ๋ซํผ ๊ท๊ฒฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๊ฐ ์ ์ฅ๋ฉ๋๋ค.
๋ธ๋ผ์ฐ์ ์ฒ๋ฆฌ โ ์๋ฒ ์ ์ก ์์
์ ๋ก๋ํ ์ํ ์ด๋ฏธ์ง์ ํธ์ง ๋ฐ์ดํฐ๋ 100% ๋ธ๋ผ์ฐ์ (Canvas API) ๋ด์์ ์ฒ๋ฆฌ๋ฉ๋๋ค. ์ด๋ค ํ์ผ๋ ์ธ๋ถ ์๋ฒ๋ก ์ ์ก๋์ง ์์ต๋๋ค. ์ ํ ์ฌ์ง์ ๋ณด์์ด ์ค์ํ ์ ๋ฌ๋ ๋ธ๋๋์ ์์ ํฉ๋๋ค. ์ธํฐ๋ท ์ฐ๊ฒฐ ์์ด๋ ์๋ํฉ๋๋ค(์ฒซ ํ์ด์ง ๋ก๋ฉ ํ).