YUN

๐Ÿ‘ˆ Back to the Project

๋งคํ‘œ์†Œ

View Code Demo

๋ฌธํ™” ๊ณต์—ฐ ์˜ˆ๋งค ํ”Œ๋žซํผ ์›น/์•ฑ ์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ (PWA)
Scss, Javascript, jQuery๋ฅผ ์ค‘์ ์œผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ™œ์šฉํ•˜์—ฌ ์กฐ๊ธˆ ๋” ๋™์ ์ธ ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•˜์—ฌ ์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • ๊ธฐ์—ฌ๋„

    ๊ฐœ์ธ 100%

  • ๊ธฐ๊ฐ„

    2022.11

  • ๊ธฐ์ˆ  ์Šคํƒ

    Html Scss Javascript jQuery Figma adobe PWA

Overview

๊ธฐ์กด์˜ ๋ฌธํ™” ๊ณต์—ฐ ํ”Œ๋žซํผ <๋งคํ‘œ์†Œ> ์˜ ๊ฒฝ์šฐ ๋™์ผํ•œ ์‚ฌ์ด์ฆˆ์˜ ์ด๋ฏธ์ง€ ๋ฐฐ์—ด๋กœ ๋˜์–ด ์žˆ์–ด ์‚ฌ์šฉ์ž์˜ ํฅ๋ฏธ๋ฅผ ๋Œ๊ธฐ ์–ด๋ ค์šธ ๊ฒƒ์ด๋ผ๊ณ  ํŒ๋‹จํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋‹จ์ ์„ ๋ณด์™„ํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ์ด๋ชฉ์„ ๋„๋Š” ๊ฒƒ๊ณผ ๋™์‹œ์— ๋”์šฑ ํŽธํ•˜๊ฒŒ ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ฆฌ๋””์ž์ธํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์ด๋ฏธ์ง€๋Š” Swiper API, Isotope Plugin๋ฅผ ์ ์šฉํ•˜์—ฌ ๋ณด๋‹ค ์•กํ‹ฐ๋น„ํ‹ฐํ•œ ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ ์ž ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค์น˜ํ•˜์ง€ ์•Š๋”๋ผ๋„ ์‚ฌ์šฉ์ž์˜ ์›น ์‚ฌ์ดํŠธ ๋ฐฉ๋ฌธ์ด ์šฉ์ดํ•˜๋„๋ก PWA ์›น ์•ฑ ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

Preview

Report

Download (Link)

Wire Frame

Disital prototype

Figma (Link)

Work

ํ™ˆ

์Šคํ† ์–ด

์ด๋ฒคํŠธ

์˜ˆ๋งค - ์—ฐ๊ทน < ์˜ฅํƒ‘๋ฐฉ ๊ณ ์–‘์ด > ์˜ˆ๋งค ์ƒ์„ธ ํŽ˜์ด์ง€

ํ”ผ๋“œ - < ํ‘œํ„ฐ๋ทฐ > ๋ฎค์ง€์ปฌ ๋ฐฐ์šฐ ๋ฏผ๊ฒฝ์•„ ์ธํ„ฐ๋ทฐ ํŽ˜์ด์ง€

๋ฉ”๋‰ด