뷰 본문
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F20a706e71ebc42a087f06ce45bdc1fa5.jpg)
안녕하세요. 도싸(도와줘싸만코)입니다.
새로 오픈한 "틀린그림찾기" 컴포넌트에 대해 알려드리기 위해 왔습니다
#1 일반형 포맷으로 시작![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Feea69b89d05b458eae8824d5dbe88e7b.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Feea69b89d05b458eae8824d5dbe88e7b.png)
틀린그림찾기 컴포넌트는 일반형(세로 스크롤)에서만 사용하실 수 있어요
#2 틀린그림찾기 컴포넌트 선택![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F722d1e627d474590adaf9686a379fe24.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F722d1e627d474590adaf9686a379fe24.png)
오른쪽에서 틀린그림찾기 컴포넌트를 더블클릭 or 끌어오셔서
#3 "만들기"를 클릭하세요![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F1077276a5d314af3b405e6b930662519.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F1077276a5d314af3b405e6b930662519.png)
본격적으로 만들어 볼까요?
#4 이미지를 업로드하세요![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F693d755d7e1744669a854863acfef211.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F693d755d7e1744669a854863acfef211.png)
새 창이 뜨면, "이미지 선택"을 눌러 원하는 이미지를 선택합니다~
이 때, 왼쪽에는 원본 이미지를,
오른쪽에는 틀린(원본과 다른) 이미지를 업로드하세요~
#5 오른쪽 이미지에서 틀린 부분을 선택하세요![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F973f352e885e4d02bba200e1993d9856.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F973f352e885e4d02bba200e1993d9856.png)
이미지가 업로드 되면 오른쪽 이미지에 파란색 네모 표시가 나타납니다.
이 네모 표시를 틀린 부분에 놓고 상단의 "저장" 버튼을 누르시면 바로 입력됩니다.
※마우스를 이용해 네모 표시를 확대할 수 있어요~
#5-1 저장하기 전 미리보기도 사용해 보세요~![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Ff842701a0d8e47e6ad9ce775dc815314.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Ff842701a0d8e47e6ad9ce775dc815314.png)
저장하시기 전에 "미리보기"를 통해 틀린 부분을 클릭해서 제대로 작동하는지 확인 가능합니다
#6 제목, 출처를 입력하세요![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Fee1fc194121046999dfc5a532aaa5773.png)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Fee1fc194121046999dfc5a532aaa5773.png)
늘 그래왔듯이 상단에 제목과 하단에 출처, 링크를 넣으면 완성~
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F53aa56b919e74789a85ed868ccaa4dac.jpeg)
출처<실제 서비스 화면.mobile>
실제 모바일 서비스 화면이니 참고하세요~
오른쪽 이미지에서 해당 영역 클릭시 동그라미로 표시됩니다 :)
사용법은 매우 간단하니
실행해 보시면 금방 터득하실 거예요~
![멋있지](https://t1.daumcdn.net/liveboard/emoticon/kakaofriends/v2/10024/thum_023_x3.png)
다음부터 나오는 세 가지 사항이
가장 중요한 핵심입니다!!!
#TIP 틀린 부분은 한 개만 선택 가능![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F76c1a60fbd2d4182ac25a0e0818ea390.jpg)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F76c1a60fbd2d4182ac25a0e0818ea390.jpg)
틀린 부분은 오직 한 개만 선택할 수 있으니 참고하세요!
#TIP 제목을 입력하지 않으면..![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Fb2d024070ba5425abd43302b71fe7994.jpeg)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2Fb2d024070ba5425abd43302b71fe7994.jpeg)
출처<실제 서비스 화면.mobile>
제목을 입력하지 않으면 디폴트로
"사진 속에서 다른 한 곳을 찾아 클릭하세요!"
라는 문구가 뜹니다~
#TIP 너무 작은 사이즈의 이미지는 지양합니다![](//img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F06a0d1b5b9694b5bbdbb92ade2248e03.jpeg)
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F06a0d1b5b9694b5bbdbb92ade2248e03.jpeg)
출처<실제 서비스 화면.mobile>
이미지 사이즈가 너무 작을 경우 정답 영역이 틀어질 수 있어요! 가로사이즈 500(픽셀) 이상으로만 맞춰주세요
![](http://img1.daumcdn.net/thumb/R720x0/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fliveboard%2Fsamanco%2F3b1c1cad0e0e4e41a9e00fce3576fb9d.jpeg)
잘 아셨죠?
그럼 다음 업데이트까지...펭빠!!!
번역중 Now in translation
잠시 후 다시 시도해 주세요 Please try again in a moment