평생 공부만 해야할듯

에드핏 광고를 올렸는데 왼쪽으로 치우쳐져 있어요.

이런걸 보고도 그냥 놔둘수 없죠?

css 코드를 수정하여 가운데 정렬을 해봅시다.

티스토리 관리 화면에서 플러그인으로 이동합니다.

콘텐츠 중 에드핏을 찾아서 클릭합니다.

광고를 등록할때 넣었던 코드를 수정합니다.

이전 버전이라면 태그 속성에 'align="center"' 만 추가 하면 가운데 정렬이 됩니다.

다음에서 관리를 할때에는 수정할 수 있도록 되어있었어요.

카카오 디벨로퍼로 넘어가면서 이전 버전으로 수정이 불가능하게 변경해 놓았네요.

지금은 'iframe'으로 내가 내용을 수정할 수가 없게 되어있습니다.

고객센터에 문의를 해보았지만 아직 답변이 없네요.

다시 문의해보고 신규 버전을 올릴께요!.

네이버 검색 노출은 일정 포스팅을 작성하였을 경우 봇이 정보를 수집합니다.

그렇다면 처음부터 검색 노출이 안된다면?

글만 열심히 써두는 꼴이 되는 겁니다.

사람들이 들어와서 댓글로 좋은 정보 잘보고 간다면 좋은건데

볼수도 없다는게 속상합니다.

방법이 없는게 아닙니다!

입문자도 쉽게 검색에 노출될수 있도록 네이버에서 지원하는 웹마스터도구라는 콘텐츠를 제공합니다.

웹마스터도구를 이용하면 자동으로 검색이 가능하도록 신청이 된다고 합니다.

간단하게 신청되는 방법을 알아보겠습니다.

https://webmastertool.naver.com/

웹마스터도구 사이트에 접속해서 로그인을 합니다.

사이트 추가를 합니다.

사이트 소유 확인을 합니다.

html 파일 업로드 방식을 권장한다고 하지만 전 HTML 편집해서 meta 태그를 추가 하려고 합니다.

HTML 태그의 meta 태그를 복사합니다.

블로그 관리 화면에서 꾸미기 -> 스킨 편집으로 이동합니다.

우측에 스킨 편집창이 보이는데 html 편집을 클릭합니다.

이렇게 html 코드를 편집할 수 있도록 화면이 보이는데 meta 태그 아래에 코드를 입력합니다.

복사한 meta 태그를 붙여 넣고 적용합니다.

적용하고 웹마스터도구로 돌아가서 확인을 클릭 합니다.

정상적으로 확인이 되면 아래와 같은 알림이 뜹니다.

확인이 되고 나면 RSS 제출을 해야합니다.

이걸로 사이트 검색 요청이 완료되었습니다.

이젠 네이버에서도 검색이 원활하게 될것입니다.

재능마켓 사이트 이런데를 찾아보면 '검색 노출 해드립니다' 이런 게시글을 보았을것입니다.

어떤 방법으로 검색 엔진에 노출을 시키는 것일까 많이 궁금했었습니다.

새로 작성한 게시글을 네이버나 구글에 제목을 정확하게 조회해도 나오지 않습니다.

일정 포스트를 작성하거나 별도의 엔진 허용 작업을 진행해야 합니다.

일반적으로 robots.txt를 수정해서 검색 봇이 찾을 수 있도록 수정하는 것입니다.

robots.txt는 웹페이지를 크롤링하는 역할을 합니다.

하지만 티스토리 블로그의 robots.txt를 수정할 수 없게 되어있습니다.

확인 하는 방법은 내 블로그 주소 뒤에 '/robots.txt' 를 붙여서 접속 하면 됩니다.

https://ooo.tistory.com/robots.txt

Mediapartners-Google은 모든 페이지에 접근 가능하고

bingbot 검색봇일경우 30초간 검색 딜레이를 준다는 것입니다.

txt파일을 수정하는 방법이 안될땐 html코드에 meta 태그 추가로 설정이 가능합니다.

meta태그 속성중에 content 의 값에 따라 설정이 달라집니다.

내 게시글을 비공개 하려고 색인을 허용하지 않을 수도있지만 

티스토리의 설정에 게시글 을 비공개 할수 있으니 meta 태그를 넣어서 검색이 잘 되도록 하는 것이 좋습니다.

그럼 원하는 설정을 정했으면 적용 해보겠습니다.

블로그 관리 화면에서 꾸미기 -> 스킨 편집으로 이동합니다.

우측에 스킨 편집창이 보이는데 html 편집을 클릭합니다.

이렇게 html 코드를 편집할 수 있도록 화면이 보이는데 meta 태그 아래에 코드를 입력합니다.

원하는 설정을 입력하고 적용합니다.

이렇게 검색 엔진 노출을 허용하여 어디서든 검색이 잘 되도록 하면 됩니다.

티스토리 플러그인 화면에 가면 추천 컨텐츠가 나옵니다.

다음에서 제공하는 광고에요.

PC

모바일

광고 코드 등록 방식은 이전에 올린 텐핑(tenping) 광고 등록과 같습니다.

우선 AdFit 사이트로  이동해서 'AdFit 가입하기'를 클릭합니다.

약관 동의를 하고 다음단계로 이동합니다.

본인인증을 진행합니다.

개인 정보를 입력합니다.

회사명을 쓰는곳에 저는 '집' 이라고 작성하고 사업장 주소를 집 주소로 넣어놨습니다.

가입이 완료되었습니다.

확인을 눌러서 메인페이지로 이동합니다.

광고관리 탭으로 이동하면 아래와 같은 화면이 나옵니다.

새 매체를 클릭한다.

광고 단위를 등록합니다.

광고단위 예시보기를 클릭하면

어떤 형태로 광고기 기제 될 것인지 확인할 수 있습니다.

'스크립트/SDK 발급'을 클릭합니다.

스크립트를 복사해서 티스토리 AdFit 컨텐츠에 붙여넣고 적용을 합니다.

적용을 완료하면 광고가 노출이 됩니다.

노출된 광고가 확인이 가능하면 승인 처리가 되어 수익이 발생합니다.

이로써 다음 AdFit 호원가입부터 광고 코드 등록까지 간단하게 끝이났습니다.

모두 부자 됩시다.

텐핑 광고를 달아봅시다!

티스토리 플러그인에 보면 텐핑(모바일) 콘텐츠가 있습니다.

콘텐츠를 클릭하면 설치를 할수 있는 팝업 창이 뜹니다.

하지만 현재 광고 코드가 없기 때문에 텐핑 사이트에서 회원가입을 해야합니다.

(저는 이미 등록해놔서 광고 코드가 있어요)

https://tenping.kr/Member/Login

위의 경로로 들어갑니다.

간단하게 로그인 할수 있도록 창이 나옵니다.

계정이 없다면 회원가입 화면으로 이동합니다.

https://tenping.kr/Member/Certify

회원가입을 하고 로그인을 하면 텐핑 메인페이지로 이동합니다.

이것은 선택 이지만 선배 등록을 하는게 혜택이 좋습니다.

왼쪽 메뉴에서 선후배 맺기를 클릭해서 선배 등록 화면으로 이동합니다.

tp.gigas@gmail.com  을 등록해서 서로 포인트를 얻으세요.

다시 광고 코드를 받으러 갑시다!

왼쪽 메뉴에서 소문박스를 선택합니다.

티스토리에 등록할 수 있는 코드가 생성됩니다.

그전에 광고의 형태를 정할 수 있는데.

제일 처음엔 '큰 형태' 로 설정이 되어있지만 바꿀 수 있습니다.

큰 형태

작은 형태

리스트 형태

스타일을 고르면 코드내용이 조금씩 바뀌는데요

원하는 코드를 복사합니다.

다시 티스토리로 돌아가서 '광고 코드 입력' 란에 붙여 넣고 적용 하면 끝납니다.

모바일전용이다 보니 티스토리 앱이나 웹에서 확인하면 됩니다.

모두 부자 되세요.

티스토리도 초대받아서 만들었고

이제 광고를 등록해볼까요?

티스토리에 플러그인이 많아서 진짜 쉽고 간편하게 광고를 게시 할수 있게 되어있습니다.

데이블도 늦었지만 플러그인에 등록되어 신청방법을 정리해 보겠습니다.

http://dable.io/ko/contact_blog/

사이트를 들어가서 '지금 신청하기' 를 클릭합니다.

http://dable.io/ko/contact_media/

이 주소로 바로 들어갈수도 있습니다.

입력 란을 다 작성하고 '신청 완료하기'를 클릭합니다.

이렇게 신청이 완료 되서 기다리면 됩니다.

신청은 간단하지만 심사 승인이 날지는 미지수 입니다.

이상으로 수익을 얻기위한 첫 걸음을 시작 내딛게 되었습니다.

위와 같이 테이블뷰에 좌측에서 또는 우측에서 스와이프를 하면 나오는 메뉴를 보았을 겁니다.

모바일 기기에 최소한의 정보를 보여주다보니 기능을 숨겨서 사용할 때가 있습니다.

이럴때 사용하기 편한 스와이프 액션을 알아보겠습니다.

tableView의 델리게이트를 준수하여 콜백 메소드를 구현했다는 표시로 self를 대입해줍니다.

델리게이트를 준수하여 trailing, leading SwipreAction 별칭으로 되어있는 함수를 구현하였습니다.

셀 우측 스와이프를 할때 알람과 삭제 변수를 생성하고 UISwipeActionsConfiguration 함수 호출할때 인자로 넣어줍니다.

배열로 받기 때문에 여러개를 넣어도 되고 한개만 넣어도 됩니다.

셀 좌측 스와이프도 동일합니다.

코드가 길어져 별도의 함수로 정의 하였습니다.

UIContextualAction 인스턴스를 만들어 주었고

이미지를 사용하려고 무료 icon 이미지를 넣어주었습니다.

처리 하고 싶은 로직을 클로저에서 처리하면 됩니다.

TextField 는 아이디나 비밀번호 입력을 받을때 사용하고

TextView는 HTML의 TextArea처럼 긴 글을 입력 받을 때 사용합니다.

TextField와 SearchBar는 입력을 한줄로 받기 때문에 PlaceHolder를 설정하여 입력설명을 적을수 있지만.

TextView는 별도의 기능을 지원하지 않습니다.

그래서 UITextViewDelegate를 준수해서 커스텀을 해야 PlaceHolder 처럼 구현을 할 수 있습니다.

Storyboard에서 TextView를 마우스 우클릭해서 컨트롤러에 연결하고 Delegate를 선택해도 되고.

override func viewDidLoad() {
    textView.delegate = self
}

위 처럼 소스 코드로 나 자신이 UITextViewDelegate를 준수하고 있다고 설정해줘도 됩니다.

extension MainViewController: UITextViewDelegate {
    
    // 편집이 시작될때
    func textViewDidBeginEditing(_ textView: UITextView) {
        textViewSetupView()
    }
    
    // 편집이 종료될때
    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text == "" {
            textViewSetupView()
        }
    }
    
    // 텍스트가 입력될때
    func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        // 개행시 최초 응답자 제거
        if text == "\n" {
            textView.resignFirstResponder()
        }
        return true
    }
}

편집이 시작될 때와 종료 되었을대 textViewSetupView 함수를 호출하도록 하였습니다.

현재 텍스트가 '내용입력' 이면 내용을 지우고 입력받을 수 있도록 글씨 색도 검정으로 바꿔주었고,

내용이 비어있을때에는 PlaceHolder 처럼 글씨는 회색으로 변경하고 '내용입력'을 넣어주었습니다.

// UITextView PlaceHolder 설정
    func textViewSetupView() {
        if textView.text == "내용입력" {
            textView.text = ""
            textView.textColor = UIColor.black
            
        } else if textView.text == "" {
            textView.text = "내용입력"
            textView.textColor = UIColor.lightGray
        }
    }

텍스트가 바뀔때에는 개행인지 판단하여 응답자를 없애줘서 포커스를 지워줍니다.

그러면 키보드도 자동으로 내려갑니다.

위와 같이 간단하게 TextView도 PlaceHolder처럼 커스텀해서 사용할 수 있습니다.

webView.load() 만 실행한다고 해서 WebView 구성이 끝일까요?

사용자는 이 화면이 아직 조회되고 있는지 알아야 합니다.

화면이 오류로 멈춰있는데 언제까지 기다릴수도 없는일 입니다.

iOS에서는 화면의 로딩 중이라는것을 보여주도록 UIActivityIndicatorView를 지원하고 있습니다.

Indicator를 구성하여 웹뷰를 완성해보겠습니다.

Storyboard에서 Indicator뷰를 생성하고 IBOutlet 변수로 정의합니다.

그리고 WKWebView가 로딩을 시작할 때와, 로딩이 끝날때, 오류일때를 각 함수를 호출해주는 Delegate를 준수하면됩니다.

extension이라는 확장 키워드를 통해 WKNavigationDelegate 를 구현하는 함수를 따로 나눠 작성했습니다.

webview의 navigationDelegate를 나 자신으로 정하면 특정 행동을 취했을때 구현한 함수를 호출해줍니다.

WKNavigationDelegate를 준수하면 웹뷰의 많은 콜백 함수들을 사용할 수 있지만 몇가지만 구현해 보았습니다.

Activity Indicator View -> Behavior 

Animating 을 체크하면 indicator가 움직이게 된됩니다.

Hides When Stopped 를 체크하면 indicator가 멈출때 화면에서 감춰줍니다.

indicator.startAnimating()    // indicator가 움직인다.

indicator.stopAnimating()    // indicator가 멈춘다.

필요에 맞게 indicator함수를 호출하면 됩니다.

iOS 8 이상의 앱에서는 UIWebView 사용보단

WKWebView를 사용하라고 문서에 나와있습니다.

장단점이 있겠지만 WKWebView를 사용하는 방법을 정리 하려고 합니다.

기존과 비슷하게 Storyboard의 Library 에서 WebKit View 로 구성하면 됩니다.

Swift 에서는 위와 같이 import작업이 필요합니다.

Storyboard의 WebKit View를 @IBOutLet 변수로 정의 합니다.

URL에 원하는 URL주소를 넣고 URLRequest로 변환해준다음

webView.load() 함수를 사용하면 끝입니다.

정말 간단하게 웹뷰를 활용한 앱을 만들수 있습니다.