서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기

ࣗѐನழझ೐۽ં౟ ѐਃӒߓ҃੉ঠӝ ѐߊࢲ࠺झܳࡄղחਃٜࣗ ഥҊѦযৡӡҗখਵ۽੄ӡ

ഛ੢ࢿ 69ੌҙࢿ ਢ੉޷૑࠭য

ഛ੢ࢿ 69ੌҙࢿ ӝמ ਢ੉޷૑࠭যਢಕ੉૑ղ੄੉޷૑ܳ੗ࣁ൤ࠅࣻ੓ب۾ذחبҳ

ഛ੢ࢿ 69ੌҙࢿ ӝמ 1IPDVT

ഛ੢ࢿ 69ੌҙࢿ ӝמ ࢎ૓ ੉޷૑ী૘઺ೡࣻ੓חਢ੉޷૑࠭যۄ੉࠳۞ܻ 1IPUP 'PDVT

ഛ੢ࢿ 69ੌҙࢿ ӝמ ࢎ૓ ੉޷૑ী૘઺ೡࣻ੓חਢ੉޷૑࠭যۄ੉࠳۞ܻ 1IPDVT

೐۽ં౟ੌ੿ ֙ਘ ֙ਘ_֙ਘ ਕ௼ࢪ ӝദ ѐߊ ֙ਘ_֙ਘ য়೑ ֙ਘ_ ই੉٣ী੉࣌
ӝמҳ୓ച߂ੌ੿࢑੿ झ೐ܽ౟ ߓನ߂਍৔

"OJNFKT 4WFMUF 5ZQFTDSJQU

ನழझࣗѐ 1$ ݽ߄ੌ

'&ઑ૒ীࢲ஠஠য়੄׮নೠࢲ࠺झܳҙܻ

౭झషܻ ࠳۠஖झషܻ ׮਺஠ಕ ஠஠য়ݗ ׸׼ࢲ࠺झ

஠஠য়੄ਢࢲ࠺झٜ੉ࢲ۽׮ܲ੉޷૑࠭যܳࢎਊ

౭झషܻ ࠳۠஖झషܻ ஠஠য়ݗ

౭झషܻ ࠳۠஖झషܻ ஠஠য়ݗ ↟ ೠ੿੸੉ҊࠛӐഋೠӝמ ӝמ ౭झషܻ ࠳۠஖ ׮਺஠ಕ ஠஠য়ݗ
ठۄ੉٘ 9 9 9 0 ഛ؀୷ࣗ 9 0 9 0 ੉޷૑ݾ۾ 9 9 0 0 ࣁࠗ੿ࠁ 9 9 9 0 ӝઓ੉޷૑࠭যޙઁ࠙ࢳ

↟ ੌҙغ૑ঋ਷6*69 ‣ ࢲ࠺झ߹׮ܲࢎਊ੗҃೷ ‣ э਷஠஠য়ࢲ࠺झۄҊੋ૑য۰਑ ӝઓ੉޷૑࠭যޙઁ࠙ࢳ ౭झషܻ ࠳۠஖झషܻ ஠஠য়ݗ

↟ ٣߄੉झ߹؀਽ࠗ઒ ӝઓ੉޷૑࠭যޙઁ࠙ࢳ ஠஠য়ݗ ׮਺஠ಕ

ѐߊ੗ҙ੼ীࢲࠄӝઓ੉޷૑࠭য੄ޙઁ੼਷

↟ ৻ࠗ௏٘੄ઓࢿ ӝઓ੉޷૑࠭যޙઁ࠙ࢳ ౭झషܻ ࠳۠஖झషܻ ׮਺஠ಕ ஠஠য়ݗ ۄ੉࠳۞ܻࢎਊ -JHIUCPY
1IPUP4XJQF ‣ ۄ੉࠳۞ܻղীࢲߊࢤೞח੉गܳ؀਽ೞӝয۰਑

↟ ࠺ബਯ੸ੋܻࣗझ਍৔ ‣ ઺ࠂѐߊ ‣ ਬ૑ࠁࣻ࠺ਊૐо ӝઓ੉޷૑࠭যޙઁ࠙ࢳ

ղоݐ਷ࢲ࠺झחղо૑అ׮

ࢎਊ੗ tಞܻೞҊࢎਊ੗஘ച੸ੋ੉޷૑࠭যܳઁҕೞ੗u

ѐߊ੗ t׸׼ࢲ࠺झীݏ୾ࣚऔѱبੑೡࣻ੓ח੉޷૑࠭যܳઁҕೞ੗u

ࢎਊ੗ ѐߊ੗

ࢎਊ੗஘ച੸ੋ੉޷૑࠭যܳઁҕೞ۰ݶযڌѱ೧ঠೡө

੉޷૑࠭য۽ࢲ೙ਃೠӝמਸ੹ࠗы୸

ӝמҳ୓ച ࢲ࠺झ߹ӝמஂ೤ ੉޷૑࠭যܻࢲ஖ ӝദࢲઁ੘ ೖ୊ܻझ౟੘ࢿ

ӝמҳ୓ചӝദࢲ

ठۄ੉؊ ഛ؀୷ࣗ ੉޷૑ݾ۾ ೨बӝמ ࠭য

ഛ؀୷ࣗ ੉޷૑ݾ۾ ࠭য ठۄ੉؊ ೨बӝמ

੉޷૑ݾ۾ ࠭য ठۄ੉؊ ഛ؀୷ࣗ ೨बӝמ

ഛ؀୷ࣗ ࠭য ठۄ੉؊ ੉޷૑ݾ۾ ೨बӝמ

ࠗоӝמ ׮਍۽٘ ੉޷૑ഥ੹ ࣁࠗ੿ࠁ కӒ ਗࠄ੉޷૑ઑഥ

ઑӘ؊ࢎਊೞӝજѱٜ݅ࣻחহਸө

ࢎਊ੗઺ब੉޷૑ݾ۾ ↟ Ӓܻ٘ ‣ ੉޷૑ݾ۾оदࢿೱ࢚ ‣ ઺рױ҅ੋೞ೐Ӓܻ٘࠭ઁҕ ೞ೐Ӓܻ٘ Ӓܻ٘

ࢎਊ੗઺ब੉޷૑ݾ۾ ↟ ࢚ೞझ৬੉೐ઁझ୊૑ਗ ‣ ೠࣚࢎਊࢿ ೞ೐Ӓܻ٘ ࢚ೞझ৬੉೐

ࢎਊ੗ীѱदझమ੄࢚కա׮਺ীߊࢤೡੌਸ   ৘ஏೡࣻ੓ѱذחೖ٘ߔઁҕ ✴ ೖ٘ߔ GFFECBDL ࢎਊ੗оࣻ೯ೠ೯زী؀೧दझమ੉૊п੸ਵ۽߈਽ೞѢաѾҗܳ੹׳ೞחੌ۲੄ݫद૑աनഐ

ࢎਊ੗઺बೖ٘ߔઁҕ ↟ ైݺب߸ചগפݫ੉࣌ബҗ ‣ ੉޷૑࠭যৌҊײӝ ‣ ੉޷૑ݾ۾ৌҊײӝ ‣࢚క߸ച઺ੋ੼৘ஏ ‣ ੉޷૑࠭যоৌܻҊײ൤Ҋ੓׮ח੼ੋ૑

↟ (SBWJUZബҗ ‣ ঘ࣌੄߈؀ߑೱਵ۽Ցয׼ӝחബҗ ‣؊੉࢚ঘ࣌ೡࣻহ׮ח੼৘ஏ ‣ ؊੉࢚ठۄ੉٘ೡࣻহח݃૑݄੉޷૑ੌ҃਋ ‣ ؊੉࢚୷ࣗؼࣻহח੉޷૑ߓਯੌ҃਋ ࢎਊ੗઺बೖ٘ߔઁҕ

ನழझ '&೒ۖಬ ౭झషܻ

݆਷ठۄ੉۪٘ܳ؊݂ೞݶߊࢤೞחਢಕ੉૑ࢿמ੷ೞח যڌѱ೧Ѿೡࣻ੓ਸө

о࢚ठۄ੉٘

о࢚ठۄ੉٘೙ਃೠठۄ੉٘݅دী୶оೞחठۄ੉٘ҙܻߑߨ

ठۄ੉٘ҳઑ झ௼ܽ ठۄ੉٘ QY QY USBOTMBUFQY USBOTMBUFQY
USBOTMBUFQY USBOTMBUFQY %0.

ठۄ੉٘ݾ۾ о࢚ठۄ੉٘ҳઑ

ठۄ੉٘ݾ۾ о࢚ठۄ੉٘ݾ۾ ഝࢿठۄ੉٘
%0. झ௼ܽ о࢚ठۄ੉٘ҳઑ

-PPQUSVF 4MJEF4J[F 7JSUVBM4J[F "DUJWF*OEFYUP о࢚ठۄ੉٘ز੘

੉޷૑झாੌ݂

੉޷૑झாੌ݂೘஖ ೘஖ܳ੉ਊೠҳഅߑध ↟ ೘஖੉߮౟ߊࢤदف੼ࢎ੉੄Ѣܻ৬઺बઝ಴ܳ҅࢑ ‣ пؘ੉ఠח੉޷૑झாੌ݂੄௼ӝ৬ਤ஖ܳաఋն ↟ झாੌ݂ఋѶ૑੼ਸ೘஖੄઺बীݏѱઑ੿ೞৈ੉޷૑झாੌ݂ҳഅ

function scaleByPinch (prevPinch, currentPinch) { const nextScale = getNextScale(prevPinch.distance, nextPinch.distance);
const scaleChange = nextScale / state.scale - 1; const imageRect = imageEl.getBoundingClientRect(); const imageCenter = getCenterPoint2D(imageRect); const offsetX = (imageCenter.x - currentPinch.center.x) * scaleChange; const offsetY = (imageCenter.y - currentPinch.center.y) * scaleChange; state.translateX += (currentPinch.center.x - prevPinch.center.x) + offsetX; state.translateY += (currentPinch.center.y - prevPinch.center.y) + offsetY; state.scale = nextScale; } ੉޷૑झாੌ݂೘஖ 1 2 3 4 5 6 7 8 9 10 11 12 12 14

੉޷૑੄ߓਯ੉ழ૕ࣻ۾ഛ؀оੜغ૑ঋחࠛಞೣ

੉޷૑੄അ੤ߓਯীٮۄࢲо઺஖ܳ੸ਊೞৈޙઁ೧Ѿ

о઺஖੸ਊ੹ о઺஖੸ਊറ

੉޷૑झாੌ݂؊࠶చ ؊࠶చਸ੉ਊೠҳഅߑध ↟ ೘஖੉߮౟৬زੌೠߑधਸ੉ਊೞৈҳഅ ‣ ف੼ࢎ੉੄Ѣܻח੐੄੄࢚ࣻч੉ਊ ‣ झாੌ݂ਤ஖ח؊࠶చ੄઺बઝ಴੉ਊ

੉޷૑झாੌ݂؊࠶చ ؊࠶చਸ੉ਊೠҳഅߑध ↟ ޙઁ࢚ട ‣ ؊࠶చ੄઺बਸӝળਵ۽੉޷૑ܳ୷ࣗೞݶ੉޷૑оചݶਸߩযթ ↟ ਗੋ ‣ ੉޷૑ܳ೦࢚؊࠶చ੄઺ब૑੼ীࢲझாੌ݂ೞৈߊࢤ
↟ ೧Ѿߑߨ ‣ ੉޷૑੄׮਺࢚కܳ޷ܻ҅࢑оמ ‣ ੉޷૑оചݶਸߩযզѪ੉ۄҊ৘ஏغݶ୷ࣗਤ஖ܳࠁ੿

ઁझ୊୽ج ✴ ࢎਊ੗ੑ۱੉ߊࢤೡٸ ੉ܳੜޅੋधೞৈ੄بೞ૑ঋ਷ز੘ਸࣻ೯ೞחѪ

؊࠶చచ झ৬੉೐చ

٣߄਍झ ࢚కҙܻ

೘஖झ৬੉೐ ࢚ೞઝ਋झ৬੉೐

ఠ஖੐҅੼

ఠ஖੐҅੼ ✴ ఠ஖੉߮౟оߊࢤ೮ਸٸ೧׼੉߮౟оਬബೠ૑౸ױೞӝਤೠ୭ࣗೠ੄ӝળч   ӝળч਷ఠ஖੄Ѣܻ दр١੉ؼࣻ੓਺

FWFOU EJTUBODF USJHHFSFWFOU UISFTIPME ↟ ನழझח੉߮౟ߊࢤപࣻীٮܲఠ஖੄੉زѢܻܳ੐҅чਵ۽ࢎਊ ↟ ੉زѢܻ੄೤੉੐҅੼ীب׳ೞݶ੉߮౟ܳߊࢤ ↟ ࢎਊ੗੄੄بীݏ૑ঋח੉߮౟оߊࢤೞ૑ঋب۾୊ܻೞৈઁझ୊
୽جߑ૑ ઁझ୊୽جఠ஖੐҅੼

ѐߊ੗҃೷

ѐߊ੗҃೷ ✴ ѐߊ੗҃೷ %FWFMPQFS&YQFSJFODF ѐߊ੗оࣗ೐౟ਝযѐߊਸೡٸוՙח݅઒ب

const phocus = createApp({ options: { loop: true, theme: 'dark'
} }); phocus.slideTo(index); phocus.slideNext(); phocus.open(); phocus.close(); phocus.on('open', callback); phocus.on('slideChange', callback); ѐߊ੗҃೷ਃࣗ"1* ২࣌ 0QUJPOT ‣ ۄ੉࠳۞ܻ੄ز੘ߑधਸࢸ੿ೡࣻ੓ب۾೧઱חч ‣ ೧׼чਸ૑੿ೞৈѐߊ੗оౠ੿ਃҳࢎ೦ীݏחӝמ ਸҳഅоמೞب۾ೣ

੉߮౟ &WFOUT ‣ ۄ੉࠳۞ܻীࢲߊࢤೞח࢚క੄߸ചܳх૑ ‣ ੉߮౟೩ٜ۞ܳ١۾ೞৈۄ੉࠳۞ܻ৬ࢲ࠺झ੄   ࢚ഐ੘ਊਸоמೞѱೣ const phocus
= createApp({ options: { loop: true, theme: 'dark' } }); phocus.slideTo(index); phocus.slideNext(); phocus.open(); phocus.close(); phocus.on('open', callback); phocus.on('slideChange', callback); const phocus = createApp({ options: { loop: true, theme: 'dark' } }); phocus.slideTo(index); phocus.slideNext(); phocus.open(); phocus.close(); phocus.on('open', callback); phocus.on('slideChange', callback); ѐߊ੗҃೷ਃࣗ"1*

ѐߊ੗҃೷ਃࣗ$44 $44߸ࣻ $447BSJBCMF ↟ $44߸ࣻܳয়ߡۄ੉٬ೞৈۄ੉࠳۞ܻ੄ӝࠄ੸ੋ ٣੗ੋਸऔѱழझథоמೞب۾୊ܻ ‣ ߓ҃ ҷҋ పفܻ١
↟ пࢲ࠺झ੄ਃҳࢎ೦ীݏѱрױೠழझథоמ ↟ ׮਺஠ಕীࢲߓ҃ పفܻ࢚࢝١߸҃ --pcs-z-root: 940109; --pcs-h-ctrl-top: 80px; --pcs-h-ctrl-bottom: 80px; --pcs-round-handlebar: 100px; --pcs-round-grid-layer: 20px 20px 0 0; --pcs-bg-image-viewer: #ffffff; --pcs-bg-controller: #fffffff5; --pcs-bg-grid: #ffffff; --pcs-bg-handlebar: #dddddd;

ѐߊ੗҃೷ਃࣗҕधޙࢲ

֙ਘ ֙ ✓ ߡӒࣻ੿ ✓ ࠳۠஖੸ਊ
֙ਘ ֙ਘ ֙ਘ ֙ਘ ✓ ѐߊ৮ܐ ✓ ࢎղߓನ ✓ ߡӒࣻ੿ ✓ ২࣌୶о ✓ ౭झషܻ੸ਊ ✓ ߡӒࣻ੿ ✓ ২࣌୶о ✓ ׮਺஠ಕ੸ਊ ✓ ప੉࠶੸ਊ ✓ ߡӒࣻ੿ ✓ ୭੸ച ✓ ஠஠য়ݗ੸ਊ ✓ 4WFMUF ✓ ٣੗ੋѐࢶ ✓ ௏٘ҳઑѐࢶ ѐߊ੗҃೷ਃࣗߡ੹ҙܻ

ನழझੜ݅ٚ੉޷૑࠭য ೠಞਵۿইए਑੉թח೐۽ં౟

ഛ੢ࢿ 69ੌҙࢿ ӝמ ನழझޖ঺ਸѐࢶೞݶજਸө

ࢎਊ੗ ѐߊ੗

ࢎਊ੗ҙ੼ীࢲ࢓ಝࠄইए਍੼

ੋఠۑ࣌٣੗ੋ ࢎਊ੗৬জ੄࢚ഐ੘ਊਸ୭੸ചೞৈࢎਊ҃೷җബਯࢿਸ֫੉ח٣੗ੋ

ݽݭథझ௼܀੄ࠗ੤ ✴ ݽݭథझ௼܀ࢎਊ੗оझ௼܀ਸݥ୸റীചݶ੉ۣࠗ٘ѱ਑૒੉ݴݥ୶חӝמ

౟ۑಁ٘ષ੄ࠗ੤ ✴ ౟ۑಁ٘ષࢎਊ੗о౟ۑಁ٘ܳ೘஖ೞৈചݶਸഛ؀߂୷ࣗೞחӝמ

ѐߊ੗ҙ੼ীࢲ࢓ಝࠄইए਍੼ٜ

ഛ੢ࢿ ഛ੢ࢿ੉੓חۄ੉࠳۞ܻѐߊ੉ݾ಴৓૑݅ ഛ੢ػӝמ੄ۄ੉࠳۞ܻܳѐߊ

೒۞Ӓੋ ѐߊ੗оۄ੉࠳۞ܻ௏٘ܳࣻ੿ೞ૑ঋҊ೙ਃೠӝמਸഛ੢ೡࣻ੓חݽٕ

೐۽ં౟ܳجইࠁݴ

t5IFEFWJMJTJOUIFEFUBJMTu ؀୽ࠁݶएਕࠁ੉૑݅ઁ؀۽೧ղ۰ݶ৘࢚೮؍Ѫࠁ׮؊݆਷֢۱੉೙ਃ

೐ۿ౟ূ٘ѐߊ੗ ৮ࢿب੓חࢲ࠺झܳѐߊೞ۰ݶ ׀ীࠁ੉૑ঋחࣁࣁೠࠗ࠙ө૑न҃ॳחѪ੉઺ਃ

5IBOLT

서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기

서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기

More Decks by kakao

Other Decks in Programming

Featured

Transcript