iOS 앱 이미지 에디터 개발기

౭झషܻ ࠳۠஖झషܻ

জ੉޷૑ী٣ఠѐߊߓ҃ ѐߊҗ੿߂য۰਑ ו՛੼߂ѐࢶࢎ೦

౭झషܻ ࠳۠஖झషܻ

8&# "11

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ӝמ೤ࢿ QSFWJFX ѐߊҗ੿

(SBQIJDT 1SPDFTTJOH ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ӝמ೤ࢿ QSFWJFX ѐߊҗ੿

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ӝמ೤ࢿ QSFWJFX ѐߊҗ੿ (SBQIJDT 1SPDFTTJOH

(SBQIJDT1SPDFTTJOH

੉޷૑೙ఠ

.FUBM SFOEFSBEWBODFE%HSBQIJDT DPNQVUFEBUBJOQBSBMMFMXJUIHSBQIJDTQSPDFTTPST

.FUBM EJSFDUBDDFTT (16

.FUBM -PX$16PWFSIFBE 0QUJNBM(16QFSGPSNBODF $POUJOVPVTQSPDFTTPSQBSBMMFMJTN &GGFDUJWFSFTPVSDFNBOBHFNFOU ծ਷$16ࠗೞ ୭੸ചػ(16ࢿמ ૑ࣘ੸ੋ೐۽ࣁࢲ߽۳୊ܻ ബҗ੸ੋ੗ਗҙܻ

.5-5FYUVSF

.5-5FYUVSF (16

.5-5FYUVSF (16 -65

.5-5FYUVSF -65

.5-5FYUVSF

.5-5FYUVSF 7FSUFY

7FSUFY 3BTUFSJ[F .5-5FYUVSF

.5-5FYUVSF 7FSUFY 3BTUFSJ[F

.5-5FYUVSF 7FSUFY 3BTUFSJ[F 'SBHNFOU

.5-5FYUVSF 7FSUFY 3BTUFSJ[F 'SBHNFOU 3FOEFS1JQFMJOF

7FSUFY 3BTUFSJ[F 'SBHNFOU 3FOEFS1JQFMJOF

$PNNBOE CVGGFS 7FSUFY 3BTUFSJ[F 'SBHNFOU 3FOEFS1JQFMJOF

$PNNBOE CVGGFS $PNNBOE FODPEFS 7FSUFY 3BTUFSJ[F 'SBHNFOU 3FOEFS1JQFMJOF

$PNNBOE CVGGFS $PNNBOE FODPEFS 7FSUFY 3BTUFSJ[F 'SBHNFOU 3FOEFS1JQFMJOF .5-3FOEFS$PNNBOE&ODPEFS .5-$PNNBOE#VGGFS
.5-3FOEFS1JQFMJOF4UBUF FODPEFSESBX1SJNJUJWFT j

$PNNBOE

struct Shader: Equatable { var vertex: Vertex var fragment: Fragment
enum Vertex: String { case passthrough = "vertexPassthrough" } enum Fragment: String { case passthrough = "fragmentPassthrough" case lookup = "fragmentLookup" case pixellate = "pixellate" } }

.5-3FOEFS1JQFMJOF4UBUF FODPEFSESBX1SJNJUJWFT j NFUBM NFUBM class ImageFilter { init(shader: Shader, inputTextures: [MTLTexture] = []) { self.shader = shader self.inputTextures = inputTextures // with shader self.renderPipelineState = ... self.fragmentArguments = ... self.fragmentArgumentsInfo = ... self.fragmentBuffers = ... } } class ImageFilter {

.5-3FOEFS1JQFMJOF4UBUF FODPEFSESBX1SJNJUJWFT j NFUBM NFUBM func updateIntensity(to value: Float) { ... } func outputImage(from source: UIImage, intensity: Float = 1.0) -> UIImage { ... } } class ImageFilter {

(SBQIJDT1SPDFTTJOH

ؘ੉ఠҙܻ

ؘ੉ఠҙܻ struct ImageState

ؘ੉ఠҙܻ struct ImageState { }

ؘ੉ఠҙܻ struct ImageState { var crop: Crop? struct Crop {
... } }

ؘ੉ఠҙܻ struct ImageState { var crop: Crop? var filter:
Filter? struct Filter { ... } }

ؘ੉ఠҙܻ struct ImageState { var crop: Crop? var filter: Filter?
var correction = Correction() var textStickers = [TextStickerType]() var frame: Frame? var mosaic = [Masking]() var blur: Masking? var resize: Resize? }

ؘ੉ఠҙܻ struct ImageState { var crop: Crop? var filter: Filter?
var correction = Correction() var textStickers = [TextStickerType]() var frame: Frame? var mosaic = [Masking]() var blur: Masking? var resize: Resize? } ੉޷૑࢚క

ؘ੉ఠҙܻ ੉޷૑࢚క

ؘ੉ఠҙܻ ੉޷૑അ੤࢚క

ؘ੉ఠҙܻ class Originator { var intialState: ImageState var currentState: ImageState
} ੉޷૑അ੤࢚క

Originator ؘ੉ఠҙܻ ੉޷૑അ੤࢚క 0SJHJOBUPS

ؘ੉ఠҙܻ ൤झషܻҙܻ ੉޷૑അ੤࢚క 0SJHJOBUPS $BSFUBLFS

ؘ੉ఠҙܻ ൤झషܻҙܻ ੉޷૑അ੤࢚క 0SJHJOBUPS $BSFUBLFS ੉޷૑সؘ੉౟ ൤झషܻ੷੢ TFU OFX4UBUF :

ؘ੉ఠҙܻ ൤झషܻҙܻ ੉޷૑അ੤࢚క 0SJHJOBUPS $BSFUBLFS ಞ૘੿ࠁҙܻ &EJUPS ੉޷૑সؘ੉౟ ൤झషܻ੷੢ TFU
OFX4UBUF :

ؘ੉ఠҙܻ ൤झషܻҙܻ ੉޷૑അ੤࢚క 0SJHJOBUPS $BSFUBLFS ಞ૘੿ࠁҙܻ &EJUPS ಞ૘সؘ੉౟ FOE&EJUJOH ੉޷૑সؘ੉౟
൤झషܻ੷੢ TFU OFX4UBUF :

੉޷૑അ੤࢚క ൤झషܻҙܻ ؘ੉ఠҙܻ 0SJHJOBUPS $BSFUBLFS ಞ૘੿ࠁҙܻ ੉޷૑সؘ੉౟ ൤झషܻ੷੢ ಞ૘সؘ੉౟ TFU
OFX4UBUF : &EJUPS FOE&EJUJOH &EJUPS ಞ૘

4UJDLFS&EJUPS ੉޷૑അ੤࢚క ൤झషܻҙܻ ؘ੉ఠҙܻ 0SJHJOBUPS $BSFUBLFS ಞ૘੿ࠁҙܻ ੉޷૑সؘ੉౟ ൤झషܻ੷੢ ಞ૘সؘ੉౟
FEJU UP : TFU OFX4UBUF : &EJUPS FOE&EJUJOH $SPQ&EJUPS 'SBNF&EJUPS &EJUPS j ಞ૘

ѐ߹ӝמҳഅ

ѐ߹ӝמҳഅ (SBQIJDT %FDPSBUJPO

ѐ߹ӝמҳഅ

੗ܰӝ

*NBHF$POUBJOFS7JFX

*NBHF$POUBJOFS7JFX 4DSPMM7JFX 1SFWJFX

enum CropBoxEdge { case none case left case topLeft case
top case topRight case right case bottomRight case bottom case bottomLeft } TDSPMM7JFX

@objc func cropBoxDragAction(_ gesture: UIPanGestureRecognizer) { let point = gesture.location(in:
self) switch gesture.state { case .began: self.gestureBeganCropBoxEdge = nearestCropBoxEdge(for: point) case .changed: updateCropBoxFrame(with: point) case ... } }

func updateCropBoxFrame(with gesturePoint: CGPoint) { let point = CGPoint( x:
max(contentFrame.origin.x, gesturePoint.x), y: max(contentFrame.origin.y, gesturePoint.y) ) switch self.gestureBeganCropBoxEdge { case ... } } @objc func cropBoxDragAction(_ gesture: UIPanGestureRecognizer) { let point = gesture.location(in: self) switch gesture.state { case .began: self.gestureBeganCropBoxEdge = nearestCropBoxEdge(for: point) case .changed: updateCropBoxFrame(with: point) case ... } }

func rotateAngleUpdated(_ angle: CGFloat) { setStraightenAngle(angle * .pi / 180)
} func setStraightenAngle(_ angle: CGFloat) { scrollView.transform = CGAffineTransform(rotationAngle: angle) }

func setStraightenAngle(_ angle: CGFloat) { scrollView.transform = CGAffineTransform(rotationAngle: angle) }

func setStraightenAngle(_ angle: CGFloat) { scrollView.transform = CGAffineTransform(rotationAngle: angle) let
rect = cropBoxFrame let rotatedRect = rect.applying(CGAffineTransform(rotationAngle: angle)) let center = scrollView.center ... scrollView.bounds = ... scrollView.contentOffset = ... scrollView.center = center }

func setStraightenAngle(_ angle: CGFloat) { scrollView.transform = CGAffineTransform(rotationAngle: angle) let
rect = cropBoxFrame let rotatedRect = rect.applying(CGAffineTransform(rotationAngle: angle)) let center = scrollView.center ... scrollView.bounds = ... scrollView.contentOffset = ... scrollView.center = center scrollView.setZoomScale(self.getZoomScaleToBounds(), animated: false) } func setStraightenAngle(_ angle: CGFloat) { scrollView.transform = CGAffineTransform(rotationAngle: angle) func getZoomScaleToBounds() -> CGFloat { let scaleW = scrollView.bounds.size.width / imageView.bounds.size.width let scaleH = scrollView.bounds.size.height / imageView.bounds.size.height return max(scaleW, scaleH) }

struct ImageState.Crop { ... var scrollViewTransform: CGAffineTransform var scrollViewCenter: CGPoint
var scrollViewBounds: CGRect var scrollViewContentSize: CGSize var scrollViewContentOffset: CGPoint var scrollViewMinimumZoomScale: CGFloat var scrollViewMaximumZoomScale: CGFloat var scrollViewZoomScale: CGFloat } TDSPMM7JFX

झ౭ழ

झ౭ழ ResizableView

झ౭ழ class ResizableView { init(contentView: UIView) { ... } }
class ResizableView {

झ౭ழ class ResizableView { @objc private func handleMoveGesture(_ sender: UIGestureRecognizer)
@objc private func handleResizeGesture(_ sender: UIPanGestureRecognizer) }

झ౭ழ class ResizableView { @objc private func handleMoveGesture(_ sender: UIGestureRecognizer)
@objc private func handleResizeGesture(_ sender: UIPanGestureRecognizer) } protocol ResizableViewDelegate: AnyObject { func didDeleteButtonTap(_ resizableView: ResizableView) func didResizableViewTap(_ resizableView: ResizableView) func resizableViewBeginMoving(_ resizableView: ResizableView) func resizableViewMoving(_ resizableView: ResizableView, transform: Transform) func resizableViewEndMoving(_ resizableView: ResizableView) func resizableViewAngleChanging(_ resizableView: ResizableView, transform: Transform) func didResizableViewAngleEndChanging(_ resizableView: ResizableView, transform: Transform) }

झ౭ழ extension ImageState.Sticker { func createResizableView() -> ResizableView { ...
} }

झ౭ழ extension ImageState.Sticker extension ImageState.Text extension ImageState.Mosaic extension ImageState.Blur extension
ImageState.Signature

ಞ૘ܻ࠙ ӝמ೤ࢿ QSFWJFX

ಞ૘ܻ࠙ 4UJDLFS 5FYU .PTBJD

ಞ૘ܻ࠙

ಞ૘ܻ࠙ 1SFWJFX

ಞ૘ܻ࠙ <> 1SFWJFX 3FTJ[BCMF7JFXT

ಞ૘ܻ࠙ <5FYU> 1SFWJFX

ಞ૘ܻ࠙ <5FYU 4UJDLFS> 1SFWJFX

ಞ૘ܻ࠙ 1SFWJFX <5FYU 4UJDLFS .PTBJD>

<5FYU 4UJDLFS .PTBJD> ಞ૘ܻ࠙ 1SFWJFX

ಞ૘ܻ࠙ 1SFWJFX <5FYU 4UJDLFS .PTBJD>

<5FYU 4UJDLFS .PTBJD> ಞ૘ܻ࠙ 1SFWJFX

ಞ૘ܻ࠙ 1SFWJFX <5FYU 4UJDLFS .PTBJD >

ಞ૘ܻ࠙ <5FYU 4UJDLFS .PTBJD > 1SFWJFX

ಞ૘ܻ࠙ 1SFWJFX 4UJDLFS5FYU-BZFS <4UJDLFS 5FYU> .PTBJD-BZFS <.PTBJD>

ಞ૘ܻ࠙ 1SFWJFX 4UJDLFS5FYU-BZFS <4UJDLFS 5FYU> .PTBJD-BZFS <.PTBJD> #MVS-BZFS <#MVS>

ಞ૘ܻ࠙ 1SFWJFX .PTBJD-BZFS <.PTBJD> 4UJDLFS5FYU-BZFS <4UJDLFS 5FYU> #MVS-BZFS <#MVS>

ಞ૘ܻ࠙ 1SFWJFX .PTBJD-BZFS <.PTBJD> #MVS-BZFS <#MVS> 4UJDLFS5FYU-BZFS <4UJDLFS 5FYU>

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ӝמ೤ࢿ QSFWJFX ѐߊҗ੿߂য۰਑ (SBQIJDT 1SPDFTTJOH

ഥ੹ झ౭ழ

var invertedTransform: CGAffineTransform { let angle = currentCrop.angle let scale
= currentCrop.scrollViewZoomScale var transform = CGAffineTransform.identity transform = transform.rotated(by: -angle) transform = transform.scaledBy(x: scale / 1, y: scale / 1) return transform }

੗ܰӝ झ౭ழ పفܻ

4DSPMM7JFX 1SFWJFX -BZFS7JFXT ੗ܰӝ झ౭ழ పفܻ

੗ܰӝ झ౭ழ పفܻ

4DSPMM7JFX 1SFWJFX -BZFS7JFXT ੗ܰӝ झ౭ழ పفܻ

4DSPMM7JFX 'JYFE1SFWJFX -BZFS7JFXT ੗ܰӝ झ౭ழ పفܻ

4DSPMM7JFX 'JYFE1SFWJFX 4UJDLFS5FYU .PTBJD #MVS-BZFS7JFXT ੗ܰӝ झ౭ழ పفܻ

4DSPMM7JFX 'JYFE1SFWJFX 4UJDLFS5FYU .PTBJD #MVS ੗ܰӝ झ౭ழ పفܻ 'MFYJCMF1SFWJFX

*NBHF$POUBJOFS7JFX 4DSPMM7JFX 'JYFE1SFWJFX 'MFYJCMF1SFWJFX 4UJDLFS5FYU .PTBJD #MVS 'SBNF 4JHOBUVSF ੗ܰӝ
झ౭ழ పفܻ

ࢤࢿ ߓನ

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ ࢤࢿ ߓನ

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ য۰਑

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ য۰਑ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿ য۰਑

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿ ࣻ੿ߧਤо௾੘সࠗఠ૓೯ೞӝ য۰਑

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿ য۰਑ ࣻ੿ߧਤо௾੘সࠗఠ૓೯ೞӝ పझ౟

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿ য۰਑ ࣻ੿ߧਤо௾੘সࠗఠ૓೯ೞӝ పझ౟ ؘ੉ఠҙܻ
ѐ߹ӝמҳഅ ೐ܻ࠭

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿ ࣻ੿ߧਤо௾੘সࠗఠ૓೯ೞӝ పझ౟ ؘ੉ఠҙܻ ѐ߹ӝמҳഅ
೐ܻ࠭ ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ য۰਑

ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭ о۽ݽ٘ ಁ٘؀਽ ৘৻ࣻ੿ ࣻ੿ߧਤо௾੘সࠗఠ૓೯ೞӝ పझ౟ ؘ੉ఠҙܻ ѐ߹ӝמҳഅ
೐ܻ࠭ ؘ੉ఠҙܻ ѐ߹ӝמҳഅ ೐ܻ࠭

ࣻ੿ߧਤо௾੘সࠗఠ૓೯ೞӝ పझ౟ J04੉޷૑ী٣ఠѐߊӝ

iOS 앱 이미지 에디터 개발기

iOS 앱 이미지 에디터 개발기

More Decks by kakao

Other Decks in Programming

Featured

Transcript