3년차 개발자, 10년차 에디터 모던화 하기 in Android

࠳۠஖ࣗѐ ী٣ఠഅടҗѐࢶ੼ ೐۽ં౟૓೯җ੿ ੋࢎ੉౟

࠳۠஖ࣗѐ જ਷ӖਸॳҊर਷ݽٚ੉ٜਸਤೠࢲ࠺झ Ӗ੉੘ಿ੉غחҕр ݽٚ٣߄੉झীࢲزੌೠӖॳӝ҃೷ઁҕ

Ӗ झఋੌ ੿۳ ੉޷૑ ୶оਃࣗ ز৔࢚ ੢ࣗ झ౭ழ ҳ࠙ࢶ ী٣ఠझಖ

&EJU5FYU &EJU5FYU 4QBO *NBHF7JFX &EJU5FYU 4QBO 7JFXী%BUBܳ੷੢ ী٣ఠझಖ

%BUB %BUB %BUB %BUB 7JFXী%BUBܳ੷੢ ী٣ఠझಖ

4DSPMM7JFX 7JFXী%BUBܳ੷੢ TDSPMM7JFXࢎਊ ী٣ఠझಖ

7JFXউী%BUB Ѿ೤ب¬ ࠂ੟ب¬ উ੿ࢿ ࢚కҙܻ੄য۰਑

Ѿ೤ب¬ ী٣ఠ ӝמ 5FYU *NBHF 7JEFP &UDj ੗ز੷੢ স۽٘ ݏ୺ߨѨࢎ
ઁݾழߡ ҳࢿਃࣗ

݆ࣻ਷-JTUFOFSઓ੤ -JTUFOFS -JTUFOFS -JTUFOFS ী٣ఠ ӝמ 5FYU *NBHF 7JEFP &UDj
੗ز੷੢ স۽٘ ݏ୺ߨѨࢎ ઁݾழߡ ҳࢿਃࣗ

ޖ঺ਸѐࢶೡࣻ੓ਸө

7JFX৬%BUBܻ࠙ ѐࢶ੼

7JFX৬%BUBܻ࠙ 1MVHJO .7*ҳઑ ѐࢶ੼

7JFX৬%BUBܻ࠙ 1MVHJO .7*ҳઑ ஹನૉ੸ਊ ѐࢶ੼

೐۽ં౟૓೯җ੿ ী٣ఠ҃۝ച

ী٣ఠ҃۝ച .7*ҳઑ ೐۽ં౟૓೯җ੿

ী٣ఠ҃۝ച .7*ҳઑ EBUBܻ࠙ ೐۽ં౟૓೯җ੿

ী٣ఠ҃۝ച .7*ҳઑ EBUBܻ࠙ ࢎਊ੗ੑ۱୊ܻ ೐۽ં౟૓೯җ੿

ী٣ఠ҃۝ച .7*ҳઑ EBUBܻ࠙ ࢎਊ੗ੑ۱୊ܻ ஹನૉ ೐۽ં౟૓೯җ੿

ӝמܻ࠙ ী٣ఠ ӝמ 5FYU *NBHF 7JEFP &UDj ੗ز੷੢ স۽٘ ݏ୺ߨѨࢎ
ઁݾழߡ ҳࢿਃࣗ

ী٣ఠ ӝמ ੗ز੷੢ ݏ୺ߨѨࢎ ઁݾழߡ স۽٘ 5FYU *NBHF 7JEFP &UDj
ҳࢿਃࣗ ӝמܻ࠙

1MVHJOҳઑ ী٣ఠ ӝמ 5FYU *NBHF 7JEFP &UDj ҳࢿਃࣗ ੗ز੷੢ ݏ୺ߨѨࢎ
ઁݾழߡ স۽٘

5FYU *NBHF 7JEFP &UDj ੗ز੷੢ ݏ୺ߨѨࢎ ઁݾழߡ স۽٘ ী٣ఠ ӝמ
1MVHJO 1MVHJOҳઑ

5FYU *NBHF 7JEFP &UDj 1MVHJO *OUFSGBDF ী٣ఠ 1MVHJOҳઑ

5FYU *NBHF 7JEFP &UDj 1MVHJO ী٣ఠ 1MVHJO *OUFSGBDF 1MVHJOҳઑ

5FYU *NBHF 7JEFP &UDj 1MVHJO ী٣ఠ 1MVHJO *OUFSGBDF &WFOU *OUFSGBDF
1MVHJOҳઑ

पઁ௏٘࢓ಝࠁӝ

1MVHJOJOUFSGBDF interface EditorPlugin<T: EditorEventHandler> { @Composable fun Draw(index: Int) fun
setEventHandler(eventHandler: T) }

interface Clickable { fun onClick() } interface Draggable { fun
onDragStart() fun onDragEnd() } interface Modifiable { fun onChange() fun onAdd() fun onRemove() } interface EditorEventHandler: Clickable, Draggable, Modifiable &WFOUJOUFSGBDF

class TextPlugin<T: EditorEventHandler>(): EditorPlugin<T> where T: Clickable, T: Modifiable {
private var eventHandler: T? = null @Composable override fun Draw() { // Draw UI } override fun setEventHandler(eventHandler: T) { this.eventHandler = eventHandler } ... } 5FYU1MVHJO

1MVHJOҳઑ &WFOU)BOEMFS 5FYU *NBHF 7JEFP &UDj 1MVHJO ী٣ఠ 1MVHJO *OUFSGBDF
&WFOU *OUFSGBDF

Object : EditorEventHandler { override fun onChange() { ... }
override fun onAdd() { ... } override fun onRemove() { ... } override fun onClick() { ... } override fun onDragStart() { ... } } &EJUPS&WFOU

fun init() { pluginList.map { it.setEventHandler(EditorEventHandler) } ... } &EJUPS&WFOU

&WFOUJO1MVHJO class TextPlugin<T: EditorEventHandler>(): EditorPlugin<T> where T: Clickable, T: Modifiable
{ private var eventHandler: T? = null override fun setEventHandler(eventHandler: T) { this.eventHandler = eventHandler } ... }

private var eventHandler: T? = null override fun setEventHandler(eventHandler: T) { this.eventHandler = eventHandler } ... } interface EditorEventHandler: Clickable, Draggable, Modifiable &WFOUJO1MVHJO

೐۽ં౟૓೯җ੿ ী٣ఠ҃۝ച .7*ҳઑ EBUBܻ࠙ ࢎਊ੗ੑ۱୊ܻ ஹನૉ

.7*ҳઑ .PEFM &EJUPS *OUFOU

೐۽ં౟૓೯җ੿ ী٣ఠ҃۝ച .7*ҳઑ EBUBܻ࠙XJUI5FYU ࢎਊ੗ੑ۱୊ܻ ஹನૉ

റࠁ റࠁ QTUZMFt_u উ֞ೞࣁਃ QTUZMFt_u ࠳۠஖ѐߊ੗j QQ റࠁ <উ֞> <#PME
:FMMPX> <ೞࣁਃ> <#PME TUSJLF> <࠳۠஖> <6OEFS-JOF> <ѐߊ੗ੑפ׮> <3FE> ؘ੉ఠ੷੢ҳઑ 5FYUtউ֞ೞࣁਃju #PME< > < > 4USJLF< > 6OEFS-JOF< >

റࠁ റࠁ റࠁ <উ֞> <#PME :FMMPX> <ೞࣁਃ> <#PME TUSJLF> <࠳۠஖>
<6OEFS-JOF> <ѐߊ੗ੑפ׮> <3FE> ؘ੉ఠ੷੢ҳઑ 5FYUtউ֞ೞࣁਃju #PME< > < > 4USJLF< > 6OEFS-JOF< > QTUZMFt_u উ֞ೞࣁਃ QTUZMFt_u ࠳۠஖ѐߊ੗j QQ

റࠁ റࠁ റࠁ 5FYUtউ֞ೞࣁਃju #PME< > < > 4USJLF< >
6OEFS-JOF< > <উ֞> <#PME :FMMPX> <ೞࣁਃ> <#PME TUSJLF> <࠳۠஖> <6OEFS-JOF> <ѐߊ੗ੑפ׮> <3FE> ؘ੉ఠ੷੢ҳઑ QTUZMFt_u উ֞ೞࣁਃ QTUZMFt_u ࠳۠஖ѐߊ੗j QQ

റࠁ റࠁ റࠁ <উ֞> <#PME :FMMPX> <ೞࣁਃ> <#PME TUSJLF> <࠳۠஖>
<6OEFS-JOF> <ѐߊ੗ੑפ׮> <3FE> ؘ੉ఠ੷੢ҳઑ 5FYUtউ֞ೞࣁਃju #PME< > < > 4USJLF< > 6OEFS-JOF< > QTUZMFt_u উ֞ೞࣁਃ QTUZMFt_u ࠳۠஖ѐߊ੗j QQ

5FYU৬4UZMF੉हਵ۽ઓ੤ೞӝٸޙী زੌೠEFQUI ೙ਃೠҔ݅সؘ੉౟оמ ૒ҙ੸ੋ੉೧ റࠁ੄੢੼

ੑ۱࢚క౵ঈ ੑ۱ ࢏ઁ ߸҃ ٘ېӒ ழࢲ੉ز

ੑ۱ ࢏ઁ ߸҃ ٘ېӒ ழࢲ੉ز ੑ۱࢚క౵ঈ

%JGG଺ӝ ੑ۱ ࢏ઁ ߸҃ ٘ېӒ ழࢲ੉ز ੑ۱࢚క౵ঈ

%JGGۆ %JGGؘ੉ఠࢎ੉੄ର੉ܳ׸Ҋ੓ח੿ࠁ ੉੹ч അ੤ч

%JGG౵ঈ അ੤ޙ੢੄EJGG -> rੑ۱sী੉ਊ ੉੹ޙ੢੄EJGG -> r࢏ઁsী੉ਊ فѐݽفࢎਊ -> r߸҃ী੉ਊ
ழࢲߧਤ੄EJGG -> r٘ېӒsীࢎਊ झఋੌ߸҃

উ֞ೞࣁਃ࠳۠஖উ٘۽੉٘ѐߊਸ׸׼ೞҊ੓ח&WBOੑפ׮ উ֞ೞࣁਃ౭झషܻীࢲJ04ѐߊਸ׸׼ೞҊ੓ח&WBOੑפ׮ %JGG౵ঈ ੉੹ޙ੢ അ੤ޙ੢

উ֞ೞࣁਃ࠳۠஖উ٘۽੉٘ѐߊਸ׸׼ೞҊ੓ח&WBOੑפ׮ উ֞ೞࣁਃ౭झషܻীࢲJ04ѐߊਸ׸׼ೞҊ੓ח&WBOੑפ׮ ੉੹ޙ੢ അ੤ޙ੢ %JGG౵ঈ ূఠ۽ա׊য૑חޙ੢ рױೠ࠺Үоמ

ੑ۱࢚క౵ঈ ੉੹ޙ੢উ֞ೞࣁਃѐߊ੗&WBOੑפ׮ അ੤ޙ੢উ֞ೞࣁਃѐߊ੗&WBOੑפ׮য়ט਷

੉੹ޙ੢উ֞ೞࣁਃѐߊ੗&WBOੑפ׮ അ੤ޙ੢উ֞ೞࣁਃѐߊ੗&WBO ࢏ઁ࢚క౵ঈ

੉੹ޙ੢উ֞ೞࣁਃѐߊ੗&WBOੑפ׮ അ੤ޙ੢উ֞ೞࣁਃ٣੗੉ց&WBOੑפ׮ ߸࢚҃క౵ঈ

ҳഅղਊEJGG ੉੹ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ അ੤ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ż ੉੹ޙ੢EJGG \tu^ അ੤ޙ੢EJGG
\tżu^ \ੑ۱^

੉੹ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ż അ੤ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮য় ੉੹ޙ੢EJGG \tżu^ \߸҃^ അ੤ޙ੢EJGG
\tয়u^ \߸҃^ ҳഅղਊEJGG

੉੹ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮য় അ੤ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮য়ט ҳഅղਊEJGG ੉੹ޙ੢EJGG \tu^ അ੤ޙ੢EJGG
\tטu^ \ੑ۱^

੉੹ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮য়ט അ੤ޙ੢উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮য় ҳഅղਊEJGG ੉੹ޙ੢EJGG \tטu^ \࢏ઁ^ അ੤ޙ੢EJGG
\tu^

ੑ۱അ੤ޙ੢EJGG ࢏ઁ੉੹ޙ੢EJGG ߸҃࢏ઁ ੑ۱ ࢎਊ੗ੑ۱୊ܻ

ࢎਊ੗ੑ۱୊ܻੑ۱ ż উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ ੉੹ޙ੢EJGG \tu^ \^ അ੤ޙ੢EJGG
\tżu^ \ੑ۱^

ż উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ ੉੹ޙ੢EJGG \tżu^ \߸҃^ അ੤ޙ੢EJGG
\tয়u^ \߸҃^ ࢎਊ੗ੑ۱୊ܻ߸҃

ࢎਊ੗ੑ۱୊ܻ߸҃ উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ ੉੹ޙ੢EJGG \tżu^ \߸҃^ അ੤ޙ੢EJGG
\tয়u^ \߸҃^ ࢏ઁೡٸࢎਊ ż

উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ ੉੹ޙ੢EJGG \tżu^ \߸҃^ അ੤ޙ੢EJGG
\tয়u^ \߸҃^ ࢎਊ੗ੑ۱୊ܻ߸҃ ࢏ઁ ࢏ઁೡٸࢎਊ

য় উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ ੉੹ޙ੢EJGG \tżu^ \߸҃^ അ੤ޙ੢EJGG
\tয়u^ \߸҃^ ࢎਊ੗ੑ۱୊ܻ߸҃ ੑ۱ ੑ۱ೡٸࢎਊ

ࢎਊ੗ੑ۱୊ܻ&OUFS ূఠܳӝળਵ۽ޙ੢ਸա׀׮ ա׀ޙ੢ਸী٣ఠী੹׳ೠ׮ ী٣ఠח࢜۽਍࠭ܳా೧ա׋ޙ੢ਸࠁৈળ׮

private var eventHandler: T? = null @Composable override fun Draw() { // Draw UI } override fun setEventHandler(eventHandler: T) { this.eventHandler = eventHandler } ... } &WFOU୊ܻ FOUFS

private var eventHandler: T? = null override fun ‘ূఠद ز੘’() { ... val (frontData, BackData) = splitData(Data) val newTextPluginItem = TextPlugin(BackData) this.eventHandler?.onEnter(newTextPluginItem) } ... } &WFOU୊ܻ FOUFS

5FYU 4UZMF 5FYU 4UZMF 5FYU 4UZMF 5FYU 4UZMF 5FYU 4UZMF
j ࢎਊ੗ੑ۱୊ܻ4UZMF$IBOHF

উ֞ೞࣁਃ ࠳۠஖ѐߊ੗ੑפ׮ উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ উ֞ ѐߊ੗ੑפ׮ ೞࣁਃ ࠳۠஖ উ֞ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮ ࢎਊ੗ੑ۱୊ܻ4UZMF$IBOHF

ࢎਊ੗ੑ۱୊ܻ4UZMF$IBOHF উ֞ ࠳۠஖ѐߊ੗ੑפ׮ ೞࣁਃ উ֞ ೞࣁਃ࠳۠஖ѐߊ੗ੑפ׮

ծই૓పझ౟૓ੑ੢߷ 6*ী੄ઓೞ૑ঋҊоמೠపझ౟ӝ߈ 5FTU

5FTU @Test fun inputTest() { val textPlugin = TextPlugin<EditorEvent>() val
textRange = TextRange(5, 10) textPlugin.onStyleChange(TextStyle(fontWeight = FontWeight.Bold), textRange) assertEquals(TextStyle.Bold, textPlugin.textData.getStyle(textRange)) }

%SBH%SPQ

-POHQSFTT %SBH%SPQ

%SBH%SPQ

UPVDI%PXO੿ࠁܳ߉ח׮ -POH1SFTTੋ૑ഛੋೠ׮ -POH1SFTT੉ݶUPVDI*Eчਸֈѹળ׮ pointerInput(Unit) { awaitEachGesture { val down =
awaitFirstDown() val drag = awaitLongPressOrCancellation(down.id) if (drag != null) onDragStart(drag.id) } } %SBH%SPQद੘௏٘

awaitEachGesture { var touchSlop = Offset.Zero awaitPointerEvent().changes.firstOrNull()?.let { val drag
= awaitLongPressOrCancellation(it.id) drag?.scrollDelta?.let { delta -> touchSlop = delta } } val down = currentEvent.changes.firstOrNull { it.id == dragDropListState.pointerId } if (down != null && down.pressed) { dragDropListState.onDrag(touchSlop, null) if ( !drag(down.id) { dragDropListState.onDrag(it.positionChange(), null) it.consume() } ) { dragDropListState.onDragCancel() } else { dragDropListState.onDragEnd() ... } } }

࠳۠஖ѐߊ੗ٜ੄੉ঠӝ IUUQT CSVODIDPLSNBHB[JOFCSVODI - EFW

"OOPUBUFE4USJOH4UZMF

ࠗ࠙߸҃੉ࠛоמ var annotatedString = annotatedString(text = “Hello world!") annotatedString.setStyle(style =
SpanStyle(color = ~, range = ~)) val spannableText = editText.text spannableText.setSpan( StyleSpan(Typeface.BOLD), 0, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE )

var textFieldValue by remember { mutableStateOf( TextFieldValue( annotatedString = buildAnnotatedString
{ withStyle(SpanStyle(color = Color.Red)) { append("hello") } }, ) ) } TextField( value = textFieldValue, modifier = Modifier.fillMaxWidth(), onValueChange = { textFieldValue = it } )

ೠӖ੗ܻࣗ࠙ޙઁ var textFieldValue by remember { mutableStateOf( TextFieldValue(annotatedString = AnnotatedString(""))
) } val onValueChange = { inputTextFieldValue: TextFieldValue -> val annotatedString = buildAnnotatedString { withStyle(SpanStyle(color = Color.Black)) { append(inputTextFieldValue.text) } } textFieldValue = inputTextFieldValue.copy(annotatedString) }

ӝࣿ۽٘ݗ .77. +BWBUP,PUMJO
$MFBO"SDIJUFDUVSF .VMUJ.PEVMF )JMU 3YUP$PSPVUJOFT 5FTU $PNQPTF 6TF$BTF .JDSP4FSWJDF &EJUPS.PEFSOJ[F

.77. +BWBUP,PUMJO $MFBO"SDIJUFDUVSF
.VMUJ.PEVMF )JMU 3YUP$PSPVUJOFT 5FTU $PNQPTF 6TF$BTF .JDSP4FSWJDF &EJUPS.PEFSOJ[F ӝࣿ۽٘ݗ

ੋࢎ੉౟ ೐۽ં౟૓೯दࠗ઒೮؍੼޷൚ೠ҅ദҗҕਬࠗ઒

ੋࢎ੉౟ ݾ಴҅ദ੤ࣻ݀ ࢸ҅উܻ࠙ ҕਬਊѐߊਊ

ੋࢎ੉౟ ݾ಴҅ദ੤ࣻ݀ ࢸ҅উܻ࠙ ҕਬਊѐߊਊ ਊযాੌ ֤੄

3년차 개발자, 10년차 에디터 모던화 하기 in Android

3년차 개발자, 10년차 에디터 모던화 하기 in Android

More Decks by kakao

Other Decks in Programming

Featured

Transcript