<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>스마트메이커 자료실</title>
    <link>https://smartjang.tistory.com/</link>
    <description>스마트메이커 자료실 블로그 입니다.</description>
    <language>ko</language>
    <pubDate>Tue, 23 Jun 2026 09:45:59 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>민영이아빠</managingEditor>
    <image>
      <title>스마트메이커 자료실</title>
      <url>https://tistory1.daumcdn.net/tistory/7549299/attach/3ffed920819d4fda926750510ef11fd6</url>
      <link>https://smartjang.tistory.com</link>
    </image>
    <item>
      <title>스마트메이커로 코딩없이 거래명세서 만들기</title>
      <link>https://smartjang.tistory.com/20</link>
      <description>&lt;p id=&quot;SE-8aa7c6bd-dbe6-4361-9198-f096205066c8&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트메이커는 DB처리 작업에 있어서 코딩없이 개발할 수 있는 최적화된 도구 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-fab70948-849a-444c-81a7-fcd6bd8087e6&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;비즈니스용 앱을 기획하시는 분들에게 도움이 될 만한 내용이라,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-3dfa1c3d-00eb-4e41-bf3c-31e8940f1fa9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;이전에 게시되었던 내용을, 좀더 자세하게 단계별로 기술해 보겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-26e4d1fb-70b6-4488-ac59-bf4b05ada61a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;약간의 DB경험이 있으신 분들은 쉽게 이해하시라 봅니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-cd96039b-ae92-4fa8-bf44-80da1ab33eb0&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-82a37898-5cd1-4fd7-b962-d32622d151df&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;구현해 볼 내용은 간단한 거래내역을 저장하는 기능인데, 응용하시면 매입매출 프로그램으로 확장 하실수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-c6d8dc23-7e2b-4360-a183-e6e7a5949b91&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e2cefc76-07f1-4f93-a064-9048b943bf17&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;거래내역을 저장하기 전에 기준정보 데이터 구축을 위해 거래처정보 및 상품정보 테이블을 생성하고&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-cde3f528-d280-4dd8-baf8-be98824fd946&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;데이터를 저장 할 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-7a637fef-b45e-4e74-8d1c-bc972a243b55&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-a79b2e25-641a-4c46-8a84-0c469053601a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;실제 비즈니스 현장에서 거래처정보에는 사업자번호, 대표자, 전화번호등 수 많은 관리항목이 존재하지만, 간단하게 거래처코드 및 거래처명만 정의할수 있도록 하겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e60f0934-4282-4aeb-bb97-37ee60469a6a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;응용 하셔서 확장해 보시기 바랍니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-736c046a-b8a1-4c43-b05f-025ca49165a2&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d22f79c2-88f6-465c-ad47-ac0b2ed84a11&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;먼저 스마트메이커 맛집 동영상 강의 처럼 DB저장을 위한 화면을 디자인 하고,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-61c416aa-aa88-42f5-88d6-a9b6ba6a7655&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;DB저장 동작을 위해 기본키가 되는 등록번호 입력란에만 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d63402c9-59eb-4ebe-931c-1d7ab74c8cd7&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;F5동작에 의해 자동으로 검색옵션에 (&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;&lt;b&gt;기본검색키 + 자동검색 + 자동증가&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;) 가 설정 될 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;689&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bjieim/btsLZhOE8UW/KBScy1kxKPFcwCalkKMEFK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bjieim/btsLZhOE8UW/KBScy1kxKPFcwCalkKMEFK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bjieim/btsLZhOE8UW/KBScy1kxKPFcwCalkKMEFK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbjieim%2FbtsLZhOE8UW%2FKBScy1kxKPFcwCalkKMEFK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;689&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;689&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; text-align: left;&quot;&gt;F10 동작으로 자동 테이블 생성작업을 진행하시면 아래와 같은 거래처정보 테이블이 생성되고,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JhM5b/btsLYNtCvY3/aHu1rMTZiHkmRqudEVoGBk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JhM5b/btsLYNtCvY3/aHu1rMTZiHkmRqudEVoGBk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JhM5b/btsLYNtCvY3/aHu1rMTZiHkmRqudEVoGBk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJhM5b%2FbtsLYNtCvY3%2FaHu1rMTZiHkmRqudEVoGBk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;463&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; text-align: left;&quot;&gt;셈플데이터를 저장할 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/meY5a/btsLYI6R4tC/fMACmg5i0fBCNoOuH5ajJ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/meY5a/btsLYI6R4tC/fMACmg5i0fBCNoOuH5ajJ1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/meY5a/btsLYI6R4tC/fMACmg5i0fBCNoOuH5ajJ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmeY5a%2FbtsLYI6R4tC%2FfMACmg5i0fBCNoOuH5ajJ1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;463&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; text-align: left;&quot;&gt;위 과정과 동일하게 상품정보 테이블을 디자인하고,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;689&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/clGUxB/btsLZGAtjMX/OAfqtddGcb4KN0LIukZOPK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/clGUxB/btsLZGAtjMX/OAfqtddGcb4KN0LIukZOPK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/clGUxB/btsLZGAtjMX/OAfqtddGcb4KN0LIukZOPK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FclGUxB%2FbtsLZGAtjMX%2FOAfqtddGcb4KN0LIukZOPK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;689&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;689&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; text-align: left;&quot;&gt;F10 동작으로 상품정보 테이블을 생성 시킬수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/xmzfG/btsLW0ATiGG/Ps4EoCSMB3KdkICz9nbeZ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/xmzfG/btsLW0ATiGG/Ps4EoCSMB3KdkICz9nbeZ0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/xmzfG/btsLW0ATiGG/Ps4EoCSMB3KdkICz9nbeZ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxmzfG%2FbtsLW0ATiGG%2FPs4EoCSMB3KdkICz9nbeZ0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;463&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; text-align: left;&quot;&gt;간단하게 상품정보 데이터를 구축할 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bYa3La/btsLZbgGOov/kdG9gcvkHo4ZQQ5L4tzfSk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bYa3La/btsLZbgGOov/kdG9gcvkHo4ZQQ5L4tzfSk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bYa3La/btsLZbgGOov/kdG9gcvkHo4ZQQ5L4tzfSk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYa3La%2FbtsLZbgGOov%2FkdG9gcvkHo4ZQQ5L4tzfSk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;463&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;463&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-4dd054fb-d696-478e-89ac-a9a5a37d6be4&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;이번에는 거래내역이 저장될 수 있도록 화면을 구성해 봅니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-2a590d60-a223-4cef-a307-13895a230713&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;현재 구현 방법은 거래내역 단일 테이블에 저장하는 방식입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-dd9290eb-ef10-4e5f-b38b-66eea0f80d71&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;(만약 2개 테이블 : Master-Detail (Heder-Item) 에 저장한 방식이라면 추후 다시 예제를 들어 작업할 수 있도록 하겠습니다.)&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-988dae90-d703-43e3-b92f-670ef8d680b7&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-5d1a975c-be23-4c76-8b16-d009e7f5f442&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;아래와 같은 화면을 구성할 텐데요, &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b87291f8-c538-44fb-8728-17a8059b66b1&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;노란색으로 설정된 입력란의 내용이 실제 거래내역 테이블에 저장될 항목입니다. &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e693f26e-1a63-40dc-a4b7-9ceea86251fb&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;거래내역 테이블에는 (매출번호, 일련번호, 거래처코드, 상품코드, 수량) 항목만 저장됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-20615cd2-9aeb-4d9c-93a8-794aaa6229da&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;나머지 입력란 항목은 저장되는 항목이 아니기 때문에 저장안함 속성이 설정되어 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;482&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cGAxTe/btsLZZ0TwPb/LttzaQuXTWKs4BijWLqGB0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cGAxTe/btsLZZ0TwPb/LttzaQuXTWKs4BijWLqGB0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cGAxTe/btsLZZ0TwPb/LttzaQuXTWKs4BijWLqGB0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGAxTe%2FbtsLZZ0TwPb%2FLttzaQuXTWKs4BijWLqGB0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;482&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;482&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-852546f4-89a8-46e6-bfee-e7dd926e7a17&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;스크롤묶기를 이용한 단일 테이블에 저장하는 방식이기 때문에 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-62532797-f783-48af-87c7-111d04cb91d4&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;매출번호에 해당하는 필드에는 검색을 위해 기본검색키로 설정이 되어 있지만, &lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #555555;&quot;&gt;&lt;b&gt;저장옵션&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #777777;&quot;&gt;&lt;b&gt;은&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #141414;&quot;&gt;&lt;b&gt; &lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #ff0010;&quot;&gt;&lt;b&gt;저장안함&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt; 속성으로 설정합니다. 왜냐하면 스크롤에 묶여 있는 행단위로 거래내역 테이블에 저장 동작을 하기 때문입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;478&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ciRVsi/btsLXp8jqDE/dodEFVFiYBwyUg0GtFP0n1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ciRVsi/btsLXp8jqDE/dodEFVFiYBwyUg0GtFP0n1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ciRVsi/btsLXp8jqDE/dodEFVFiYBwyUg0GtFP0n1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciRVsi%2FbtsLXp8jqDE%2FdodEFVFiYBwyUg0GtFP0n1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;478&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;478&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-69497fc1-1ce7-4495-8387-56f568689f5a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;이 거래내역 화면에는 팝업묶기 아톰이 사용이 되는데요, 일반적으로 팝업묶기 아톰이 잘 활용되지 않는듯 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-2bb88f52-0a64-4c6e-8dc0-068693bf8e76&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;팝업묶기 아톰은 이미 저장되어 있는 거래처정보나 상품정보를 쉽게 조회하고 키보드 타이핑 없이 선택만으로 입력하는 방식이기 때문에, 비즈니스용 앱 개발에 있어서 활용하시면 많은 도움이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-91c4b845-289c-404b-86b8-bcfeb3731dc7&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-eeadc42e-26d7-4a86-b2ea-f7fcaeb10749&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;거래처코드 및 거래처명은 거래처정보에서 읽어올 항목이기 때문에 거래처코드, 거래처명 아톰을 선택후, &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-32437686-6fba-4008-9dcb-f14d67d4cfd9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;팝업묶기 아톰을 선택하시면, 아래와 같이 파랑색 영역에 묶이게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b6d68f84-6830-4372-ad72-bd5be7e2fad0&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;팝업묶기 아톰의 데이터속성에는 거래처정보 테이블에서 읽어 올수 있도록 각각 항목을 추가 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;481&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bnKAn4/btsLYMBsjJO/ZpKEul0zoI0fEkGvxaXPv1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bnKAn4/btsLYMBsjJO/ZpKEul0zoI0fEkGvxaXPv1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bnKAn4/btsLYMBsjJO/ZpKEul0zoI0fEkGvxaXPv1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbnKAn4%2FbtsLYMBsjJO%2FZpKEul0zoI0fEkGvxaXPv1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;481&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;481&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;마찬가지로 상품코드, 상품명, 단가도 상품정보 테이블에서 읽어 올수 있도록 팝업묶기 아톰으로 묶을수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;478&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/beVB5C/btsLXpAv2cU/mEuNjkqae6TsxK9bkHN8M1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/beVB5C/btsLXpAv2cU/mEuNjkqae6TsxK9bkHN8M1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/beVB5C/btsLXpAv2cU/mEuNjkqae6TsxK9bkHN8M1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbeVB5C%2FbtsLXpAv2cU%2FmEuNjkqae6TsxK9bkHN8M1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;478&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;478&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;합계 입력란은 (단가 x 수량)을 계산한 값이기 때문에 연산식에 설정 할수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;479&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bgVJk2/btsLXSPXTIQ/DYXMUGAGu4otGVQM2Gsn50/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bgVJk2/btsLXSPXTIQ/DYXMUGAGu4otGVQM2Gsn50/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bgVJk2/btsLXSPXTIQ/DYXMUGAGu4otGVQM2Gsn50/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgVJk2%2FbtsLXSPXTIQ%2FDYXMUGAGu4otGVQM2Gsn50%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;479&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;479&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-b621fcde-2ab3-4b81-87bc-19a3c94d4949&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;일련번호는 행번호 아톰입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-0936b0d7-933e-4613-9c4c-5ddca4316459&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;팝업묶기 아톰을 스크롤묶기 할때는 팝업에 묶인 입력란을 스크롤에 묶는게 아니고, 팝업묶기 아톰만 스크롤에 묶일수 있도록 합니다. &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-75389098-1bbe-4c20-b187-3104651b1939&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e7851122-c6d6-48b0-be1a-fff4b07f99c2&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;스크롤묶기 아톰의 데이터속성에는 일련번호 필드를 설정하고, 기본검색키를 설정할수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-25dfb5bf-6f3b-4186-9013-f5c66c676c7c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;거래내역 단일 테이블에 저장하는 방식이기 때문에 하나의 매출번호 기본키에 중복으로 저장되는것을 방지하기 위해 일련번호 필드가 기본검색키가 추가 될수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-08dd7559-7b62-4ea6-b432-6479cddd9471&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;즉, 거래내역 테이블은 (매출번호 + 일련번호) 2개의 Primary Key 로 생성되어야 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;482&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/caIEBW/btsLZaWnrld/GX80xOo5T5s9CveYQIwbn0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/caIEBW/btsLZaWnrld/GX80xOo5T5s9CveYQIwbn0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/caIEBW/btsLZaWnrld/GX80xOo5T5s9CveYQIwbn0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcaIEBW%2FbtsLZaWnrld%2FGX80xOo5T5s9CveYQIwbn0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;482&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;482&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-4ef14300-f513-4955-8f7b-f0448283860e&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;스크롤묶기 아톰에 있어서 가장 중요한 속성인, &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-f2879af5-df94-4a25-91ba-a89a7162f458&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;테이블 연결기능을 이용해 스크롤에 묶이지 않은 매출번호를 스크롤 항목에 조건이 설정될 수 있도록 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-02991af4-b7be-43f9-ac97-96c1efa396a6&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;매출번호 항목을 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;481&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b6Q2RI/btsLZHTGL0f/gkx26BKohD07QSAGujpKxK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b6Q2RI/btsLZHTGL0f/gkx26BKohD07QSAGujpKxK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b6Q2RI/btsLZHTGL0f/gkx26BKohD07QSAGujpKxK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6Q2RI%2FbtsLZHTGL0f%2Fgkx26BKohD07QSAGujpKxK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;481&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;481&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-138c44c4-1587-4d2f-a79f-44661bb41061&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;p id=&quot;SE-0142ab5e-f84f-40f0-a436-4fa853277c60&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;이 상태까지 진행이 되면 거래내역 DB 저장까지는 진행이 된 상태입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b609548f-9ca3-4965-bd16-1f7c71b4a061&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;F10 동작후 테이블 생성이 진행되면 아래와 같이 테이블이 생성이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;550&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/v81O8/btsLYJLvCD3/uzNJTJ2tz8K30xpKK3C1O1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/v81O8/btsLYJLvCD3/uzNJTJ2tz8K30xpKK3C1O1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/v81O8/btsLYJLvCD3/uzNJTJ2tz8K30xpKK3C1O1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fv81O8%2FbtsLYJLvCD3%2FuzNJTJ2tz8K30xpKK3C1O1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;620&quot; height=&quot;550&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;550&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;

&lt;div id=&quot;SE-71b7cfb1-691c-4962-a656-e25c81690a0c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-a2ac56c0-0f88-4c79-aff2-835e7a71afd1&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;기본키 즉, Primary Key 가 매출번호 + 일련번호 로 생성이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/bIXBBM/btsLZbnr5IU/tyJXTtIJEgsnzf0JrTfPf0/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;477&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-7a9aebba-fd25-48e6-a9b3-72b7a959c655&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-f75523f1-06b9-4e23-a499-e64cd7d83d5b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;그런데, 의문이 생깁니다. &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-66f5705a-43d0-408a-8b7e-a2673a3d4ec9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;거래내역 테이블에 거래처코드 및 상품코드만 저장이 되는데, 검색시 다른 테이블에 저장되어 있는 거래처명 및 상품명은 어디서 불러올까요?&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-57ec8077-32f6-4c36-a00f-8216bd4c4d3b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;스마트메이커에서는 &lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;&lt;b&gt;테이블 연결조건&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt; (JOIN 문) 이라 해서 검색동작시, 다른 테이블에서 읽을 수 있는 동작이 존재합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-dfa52187-30bc-4814-9402-e8fbade2229b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-8edd7a3e-1db7-4b45-bedb-6bec6aa78d16&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;거래내역 테이블의 거래처코드 필드와 동일한 값인 거래처청보의 거래처코드 항목을 연결조건에 추가 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-dc6f463a-d8b0-44c4-93bd-64c4a22ff255&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #ff0010;&quot;&gt;&lt;b&gt;거래내역.거래처코드 = 거래처정보.거래처코드&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-ccb69d2b-cda8-4b97-9815-765c456dee5a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;의 조건을 가지도록 설정이 되는 방식입니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;479&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dediXV/btsLZGHezmv/c52joaxmoyMBjd9nBiLs80/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dediXV/btsLZGHezmv/c52joaxmoyMBjd9nBiLs80/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dediXV/btsLZGHezmv/c52joaxmoyMBjd9nBiLs80/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdediXV%2FbtsLZGHezmv%2Fc52joaxmoyMBjd9nBiLs80%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;479&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;479&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-2142b84c-6693-47b9-93c2-bcda54bfbbb5&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;p id=&quot;SE-0636e9eb-0d44-4b04-9be2-3e0dbd859258&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;/div&gt;
&lt;p id=&quot;SE-0636e9eb-0d44-4b04-9be2-3e0dbd859258&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;동일하게 상품코드 입력란의 테이블연결조건에 상품정보의 상품코드 필드를 조건에 추가합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #ff0010;&quot;&gt;&lt;b&gt;거래내역.상품코드 = 거래처정보.상품코드&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;482&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/nKjIN/btsLW10KmAL/9ZZUysPEEzvZEvirSwsae1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/nKjIN/btsLW10KmAL/9ZZUysPEEzvZEvirSwsae1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/nKjIN/btsLW10KmAL/9ZZUysPEEzvZEvirSwsae1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnKjIN%2FbtsLW10KmAL%2F9ZZUysPEEzvZEvirSwsae1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;482&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;482&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; text-align: left;&quot;&gt;이렇게 설정이 되면, 스크롤묶기 항목인 거래내역_찾아오기1 DB처리객체가 생성이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;750&quot; data-origin-height=&quot;550&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/IuO5g/btsLYK4Gp0f/jHLTrBUXfqbPJMRppmeF51/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/IuO5g/btsLYK4Gp0f/jHLTrBUXfqbPJMRppmeF51/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/IuO5g/btsLYK4Gp0f/jHLTrBUXfqbPJMRppmeF51/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIuO5g%2FbtsLYK4Gp0f%2FjHLTrBUXfqbPJMRppmeF51%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;750&quot; height=&quot;550&quot; data-origin-width=&quot;750&quot; data-origin-height=&quot;550&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222; letter-spacing: 0px;&quot;&gt;여기에 보면 관계설정 항목을 보시면 위에서 설정한 조건이 확인이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;div id=&quot;SE-c4492ca9-fefa-4d4b-89ec-2e719408607a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;p id=&quot;SE-8afe531b-63e6-470b-861d-34691b8449ef&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #ff0010;&quot;&gt;&lt;b&gt;거래내역.거래처코드 = 거래처정보.거래처코드&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6f403a52-efb5-47a7-b762-ede6b0736e1e&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #ff0010;&quot;&gt;&lt;b&gt;거래내역.상품코드 = 거래처정보.상품코드&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;643&quot; data-origin-height=&quot;338&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c1P3Mm/btsLYt3neg0/XA1Uf2KchePvQQv4dhb8W1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c1P3Mm/btsLYt3neg0/XA1Uf2KchePvQQv4dhb8W1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c1P3Mm/btsLYt3neg0/XA1Uf2KchePvQQv4dhb8W1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc1P3Mm%2FbtsLYt3neg0%2FXA1Uf2KchePvQQv4dhb8W1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;643&quot; height=&quot;338&quot; data-origin-width=&quot;643&quot; data-origin-height=&quot;338&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-f28be7d3-e12b-4ff3-bff8-ddd40348254f&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;span style=&quot;color: #222222; letter-spacing: 0px;&quot;&gt;SQL 질의문을 보면 자동으로 JOIN 구문이 설정이 됩니다.&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-880d0362-e2df-42fe-b3c5-cf3ed5769eff&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;p id=&quot;SE-bfd58de4-8850-44f4-8bdb-9dcf07e81ccd&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;&lt;b&gt;LEFT OUTER JOIN DEV_DB.거래처정보 b ON a.거래처코드 = b.거래처코드 &lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-ef50b1ae-f0f0-4c91-85fa-fd7b2bbe3c5b&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;&lt;b&gt;LEFT OUTER JOIN DEV_DB.상품정보 c ON a.상품코드 = c.상품코드 &lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-8db29f34-27f1-4aad-8ac4-582396ad1b29&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #222222;&quot;&gt;&lt;b&gt;​&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-20949f8f-ea9d-40e4-ad7d-113d634ad42c&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;이 화면을 실행하게 되면 거래처정보 및 상품정보를 팝업묶기 아톰을 이용해 입력이 되고,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-4b24d412-327f-4462-b41c-8951aafd242d&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #222222;&quot;&gt;관계설정을 통해 검색되는것을 확인 하실 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/bqr83h/btsLYNmN3FM/DhYV59Uoyf7c0Np4AiXaS0/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;492&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;386&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/boPXAN/btsLZFuPb0H/tpzxnrzqwfbSGgyMeMSmak/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/boPXAN/btsLZFuPb0H/tpzxnrzqwfbSGgyMeMSmak/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/boPXAN/btsLZFuPb0H/tpzxnrzqwfbSGgyMeMSmak/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboPXAN%2FbtsLZFuPb0H%2FtpzxnrzqwfbSGgyMeMSmak%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;386&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;386&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>smartmaker</category>
      <category>거래명세서</category>
      <category>노코딩</category>
      <category>로우코딩</category>
      <category>매출장</category>
      <category>스마트메이커</category>
      <category>앱개발</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/20</guid>
      <comments>https://smartjang.tistory.com/20#entry20comment</comments>
      <pubDate>Fri, 24 Jan 2025 09:04:28 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커 OpenAPI 기능을 이용하여 ChatGPT 사용하기</title>
      <link>https://smartjang.tistory.com/19</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-19fda723-f2b3-4c9c-a346-df3218cf4bc8&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이전 게시글에서 스마트메이커에서 제공하는 챗봇 아톰을 이용하여 코딩없이 간단하게 API Key 설정만으로&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-9c04c507-5a05-4da6-9ea5-4a2b6512ae01&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;ChatGPT 채팅 기능을 적용한적이 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;이번에는 챗봇 아톰을 사용하지 않고 순수하게 OpenAPI 기능을 활용하는 방법을 진행해 보겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://platform.openai.com/docs/api-reference/making-requests&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://platform.openai.com/docs/api-reference/making-requests&lt;/a&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; letter-spacing: 0px;&quot;&gt;이곳 ChatGPT OpenAPI 사용 규격을 확인하시면 요청값을 확인 할 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;img style=&quot;caret-color: transparent; background-color: #ffffff; color: #534640; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/b5B6rc/btsLVMvucYu/qCFyw7CoQNtpokEtVbD4jK/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;344&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/p&gt;
&lt;div id=&quot;SE-2289e666-4c8d-4f5d-a247-67c037a6f3c0&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-00940562-efa9-4683-bba3-f96f3d672636&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트메이커에는 이 요청값 스팩을 확인하여 외부기능연계(OpenAPI) 에 설정을 해야 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-243a1e0d-a1fb-4cd6-bd57-be75d8badce3&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;HTTPS, 송수신 데이터 형식이 JSON 방식이기 때문에 각각 Json 으로 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/bjjvYS/btsLWwTezdU/0ybqB4qd1jUobR9MXMmug1/img.png&quot; data-origin-width=&quot;350&quot; data-origin-height=&quot;530&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p id=&quot;SE-801f65bc-73c0-4f12-a604-6f39d4efa246&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Request Header 값을 보면&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-7c5e9716-32e3-48e2-b74c-2a0808790b54&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #00a67d;&quot;&gt;Authorization: Bearer &lt;/span&gt;&lt;span style=&quot;color: #df3079;&quot;&gt;$OPENAI_API_KEY&lt;/span&gt;&lt;span style=&quot;color: #00a67d;&quot;&gt;&quot; &lt;/span&gt;입니다.&lt;/p&gt;
&lt;p id=&quot;SE-f1799c6e-da05-4860-b4e7-8ae1ba43a403&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;스마트메이커에서는 인증값을 아래와 같이 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6a20c8bc-cd43-4f7c-9076-4cf397357950&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #00a67d;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d3831b07-e25a-4396-b677-c1ce291d5c67&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #00a67d;&quot;&gt;Content-Type: application/json &lt;/span&gt;&lt;span style=&quot;color: #141414;&quot;&gt;으로&lt;/span&gt;&lt;span style=&quot;color: #00a67d;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #141414;&quot;&gt;설정합니다.&lt;/span&gt;&lt;span style=&quot;color: #141414;&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;482&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bKSSkS/btsLV8ykA2a/fUCmNBeBiCeM20eSLWqp9K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bKSSkS/btsLV8ykA2a/fUCmNBeBiCeM20eSLWqp9K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bKSSkS/btsLV8ykA2a/fUCmNBeBiCeM20eSLWqp9K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbKSSkS%2FbtsLV8ykA2a%2FfUCmNBeBiCeM20eSLWqp9K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;512&quot; height=&quot;482&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;482&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-d524c74f-0f0f-419f-820a-0f8faeeaf583&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-fb6e0a33-9a8e-40d8-a00b-098c320ba6dc&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;URL 정보가 &lt;a href=&quot;https://api.openai.com/v1/chat/completions&quot;&gt;https://api.openai.com/v1/chat/completions&lt;/a&gt; 이기 때문에&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-9ec4481d-8db7-47c0-917b-78f1edc560f6&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;위에서 설정한 도메인을 제외한 서비스 기능에 나머지 메소드 영역을 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/burvDj/btsLXSgIwL1/BCEzOmbt3kM0Tm6Dl20yb0/img.png&quot; data-origin-width=&quot;750&quot; data-origin-height=&quot;373&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-d82bdf2e-8305-4e23-be32-5d21bf28a93c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-ce7f1b9a-d4c2-44a1-b247-3c26790b2312&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;요청값 Json 형식에 맞춰 전달해줄변수 항목에 json 값을 구문분석하여 넣을 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e5939542-099d-416b-b442-87b93c820c5b&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;content 항목에 입력란 아톰값(#입력란) 을 전달할 수 있도록 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;750&quot; data-origin-height=&quot;387&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cPeBqg/btsLVvnc8kz/e9pRYhhy4tKoW3xedwKAnk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cPeBqg/btsLVvnc8kz/e9pRYhhy4tKoW3xedwKAnk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cPeBqg/btsLVvnc8kz/e9pRYhhy4tKoW3xedwKAnk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcPeBqg%2FbtsLVvnc8kz%2Fe9pRYhhy4tKoW3xedwKAnk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;750&quot; height=&quot;387&quot; data-origin-width=&quot;750&quot; data-origin-height=&quot;387&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-20cc90c1-2b6d-4006-87ea-c7ab2dbd5471&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;background-color: #ffffff; color: #141414; text-align: left;&quot;&gt;응답값 JSON 스팩을 구문 분석하여,&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/c1Hm8g/btsLV52CQsu/gSJ3oIr3IVVTnT1QURj9s0/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;543&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-ef4f1049-9971-4439-b2c1-9d06f015e8ee&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-e2e709d3-1352-4d68-a644-b44e396e502e&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;전달받을 변수에 설정할수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;결과값은 출력란 아톰으로 받을 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/cNM2Z2/btsLV2Y9q0v/IW7715Cdo1akRsno4mk0bK/img.png&quot; data-origin-width=&quot;750&quot; data-origin-height=&quot;548&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414; background-color: #ffffff; letter-spacing: 0px;&quot;&gt;진행관리자에 요청버튼 클릭시, 위에서 설정한 OpenAPI 를 호출할 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;div id=&quot;SE-c12e1175-c12c-4cf4-92b0-81cbb0cbcd28&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/b5QnsG/btsLYcFZThl/oU7Ow4cVhzsv1LQkaq5Tyk/img.png&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;545&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;div id=&quot;SE-c62f18a7-e2af-4cf8-9a8a-f0e33d85da47&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-5a95f34f-a47a-4984-9bb2-0dc14bf43ab9&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #141414;&quot;&gt;이렇게 진행하시면 코딩한줄 없이 노코딩 방식으로 ChatGPT 를 쉽게 활용하실 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;802&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/G9LMw/btsLW4hC47u/k8EFINN8szkZv584F1RMI0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/G9LMw/btsLW4hC47u/k8EFINN8szkZv584F1RMI0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/G9LMw/btsLW4hC47u/k8EFINN8szkZv584F1RMI0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FG9LMw%2FbtsLW4hC47u%2Fk8EFINN8szkZv584F1RMI0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;802&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;802&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #141414; text-align: left;&quot;&gt;이런 방식으로 활용하면 챗봇아톰에 사용된 채팅방식의 UI 가 아닌 사용자가 맘대로 UI 를 구성하실수 있게 됩니다&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #141414; text-align: left;&quot;&gt;.&lt;/span&gt;&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>ChatGTP</category>
      <category>OpenAPI</category>
      <category>smartmaker</category>
      <category>노코딩</category>
      <category>스마트메이커</category>
      <category>인공지능</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/19</guid>
      <comments>https://smartjang.tistory.com/19#entry19comment</comments>
      <pubDate>Thu, 23 Jan 2025 09:18:27 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커로 문자인식(OCR) 기능 처리하기</title>
      <link>https://smartjang.tistory.com/18</link>
      <description>&lt;p id=&quot;SE-23bd1019-97c3-4c3d-a68e-fa17709abf55&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;OCR은 'Optical Character Recognition'의 약자로, 광학 문자 인식이라는 뜻으로,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-aa70a6ec-1994-4b96-afac-6ac21325b27b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스캔된 문서나 이미지에 있는 문자를 컴퓨터가 인식하고 텍스트 데이터로 변환하는 과정입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-008c08be-877a-4719-8556-121d85c957df&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;OCR 인식률은 이미지의 품질, 폰트, 해상도등 에 따라 인식률이 다를수 있는데여,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-09682ac7-1bb8-4ebf-81de-98b21f6ee388&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;요즘은 인공지능(AI) 기반의 OCR 기술 등이 보편화 되고 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-50f6fc26-80d1-449c-9f87-13123aa8f20f&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;여러 제공 AI 기반의 OCR 기술이 있지만, 스마트메이커에서는 구글에서 제공하는 Vision API 를 사용합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-828848a3-35bb-4d7d-9029-e3806716e182&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;a href=&quot;https://cloud.google.com/vision?hl=ko&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://cloud.google.com/vision?hl=ko&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1737502481433&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;https://cloud.google.com/vision?hl=ko&quot; data-og-description=&quot;&quot; data-og-host=&quot;cloud.google.com&quot; data-og-source-url=&quot;https://cloud.google.com/vision?hl=ko&quot; data-og-url=&quot;https://cloud.google.com/vision?hl=ko&quot; data-og-image=&quot;&quot;&gt;&lt;a href=&quot;https://cloud.google.com/vision?hl=ko&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://cloud.google.com/vision?hl=ko&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;https://cloud.google.com/vision?hl=ko&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;cloud.google.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;서비스 이용에 앞서 데모용으로 &lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;&lt;b&gt;API 사용해 보기&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt; 기능이 있어서 성능 등을 테스트해 볼수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;498&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cV63hC/btsLUhWOSic/E4LCtaSHvfpRVkZtsDhb4k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cV63hC/btsLUhWOSic/E4LCtaSHvfpRVkZtsDhb4k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cV63hC/btsLUhWOSic/E4LCtaSHvfpRVkZtsDhb4k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcV63hC%2FbtsLUhWOSic%2FE4LCtaSHvfpRVkZtsDhb4k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;498&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;498&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;400&quot; data-origin-height=&quot;711&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bDkr0N/btsLUh3BR1X/Q3JNNgohDPVXBOMt4C1GL0/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bDkr0N/btsLUh3BR1X/Q3JNNgohDPVXBOMt4C1GL0/img.jpg&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bDkr0N/btsLUh3BR1X/Q3JNNgohDPVXBOMt4C1GL0/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbDkr0N%2FbtsLUh3BR1X%2FQ3JNNgohDPVXBOMt4C1GL0%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;400&quot; height=&quot;711&quot; data-origin-width=&quot;400&quot; data-origin-height=&quot;711&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;원하는 이미지를 끌어다 놓은 후, 인식을 실행하게 되면 이런 형태로 인식을 하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;671&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cgrv4i/btsLUGICkbv/vKtZIOkkEYWFVbkLkKjJfk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cgrv4i/btsLUGICkbv/vKtZIOkkEYWFVbkLkKjJfk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cgrv4i/btsLUGICkbv/vKtZIOkkEYWFVbkLkKjJfk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcgrv4i%2FbtsLUGICkbv%2FvKtZIOkkEYWFVbkLkKjJfk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;671&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;671&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;자세한 결과값은 JSON 형태로 좌표정보 및 Text 결과값을 보실 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;457&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cWcV8U/btsLUt3MIsM/CJq0Qvi0wVvG7Qso47Fue1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cWcV8U/btsLUt3MIsM/CJq0Qvi0wVvG7Qso47Fue1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cWcV8U/btsLUt3MIsM/CJq0Qvi0wVvG7Qso47Fue1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcWcV8U%2FbtsLUt3MIsM%2FCJq0Qvi0wVvG7Qso47Fue1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;457&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;457&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-522f2192-798f-42cd-a035-a6da641e822c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-4d7fa49e-d8c6-481c-97d6-6d6981ff0877&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Google Cloud Vision API 를 사용하기 위해서는 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-abdedc09-f99c-4d3f-a526-a74ea68c2271&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;사용량에 따라 비용이 발생하는 서비스 이기 때문에 가입 후, VISA 카드 등록은 필수 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e18f1261-6908-4fb2-b27a-d3ebe6ba58dc&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-47ae0b4d-41f5-4b68-b458-b4728f322658&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;일단 먼저 API 사용으로 설정이 되어야 하고&lt;/span&gt;&lt;/p&gt;
&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;403&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/brOyIL/btsLWqddydL/dhXXc3OJJaj61n6MiKSiV0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/brOyIL/btsLWqddydL/dhXXc3OJJaj61n6MiKSiV0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/brOyIL/btsLWqddydL/dhXXc3OJJaj61n6MiKSiV0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrOyIL%2FbtsLWqddydL%2FdhXXc3OJJaj61n6MiKSiV0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;403&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;403&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-2517ef0a-0c50-43b1-9856-daea01e81615&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;구글클라우드 서비스 콘솔에 가셔서 사용자 인증정보 에서 API키를 생성받아야 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;470&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cVIM8Y/btsLUClTlxq/4gYcWkhPjG2fP2oxsJVyRk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cVIM8Y/btsLUClTlxq/4gYcWkhPjG2fP2oxsJVyRk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cVIM8Y/btsLUClTlxq/4gYcWkhPjG2fP2oxsJVyRk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcVIM8Y%2FbtsLUClTlxq%2F4gYcWkhPjG2fP2oxsJVyRk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;470&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;470&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-ef0fc99b-c0b0-4e95-9c20-2e7913962c6d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트메이커에는 이 서비스를 사용하기 위해 영상인식 아톰을 사용합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-7d334275-d475-4db6-8deb-ba9569e65002&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;아마도 문자 이외에 이미지등도 인식하기 때문에 아톰 이름이 영상인식(이미지?) 인듯 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;818&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bam4BY/btsLVw6jUND/YzcSri86H6xAjjApMSeve0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bam4BY/btsLVw6jUND/YzcSri86H6xAjjApMSeve0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bam4BY/btsLVw6jUND/YzcSri86H6xAjjApMSeve0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbam4BY%2FbtsLVw6jUND%2FYzcSri86H6xAjjApMSeve0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;818&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;818&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-fd6a0b08-61e8-4bfe-b9f4-76d6ce3ecaa6&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;API Key 항목에 할당 받은 Key 를 설정하고,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-ef3ff82f-e92e-4cc8-9341-58cb521248cb&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;인식대상은 텍스트로 설정합니다. &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-5912328b-8f99-4c40-8e59-e3aec0d6596d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;입력 데이터는 이미지 입력란 아톰을 통해 갤러리나나 카메라를 통해 입력받고,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-08e5c85a-a90a-469d-a6dc-92b104bb784d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;결과값을 출력 데이터에 설정되어 있는 입력란 아톰을 받을 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-0a2db855-c829-4bc2-9c86-d380e73a5e09&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-1f56f791-3d51-4830-a346-6d0cdb067a94&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;영상인식 아톰클릭후, 사진을 넣어 실행 시키게 되면 입력란 아톰으로 추출된 텍스트를 받게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;818&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bTToa2/btsLUZ2gY7K/7QBW5nBfcyekcmBesUO3q0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bTToa2/btsLUZ2gY7K/7QBW5nBfcyekcmBesUO3q0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bTToa2/btsLUZ2gY7K/7QBW5nBfcyekcmBesUO3q0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTToa2%2FbtsLUZ2gY7K%2F7QBW5nBfcyekcmBesUO3q0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;818&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;818&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-90802c39-91e5-4081-8ca6-01ba6967a836&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;일단 영수증 이미지에서 텍스트는 잘 추출을 되는군요.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-441dbf65-957a-45a9-96c4-86db36511a23&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;하지만 실용적인 앱개발 (영수증인식, 카드, 명함 인식) 을 위해서는 정형화된 템플릿 방식으로 인식을 위한 논리가 필요해 보입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-8ed9e419-6e11-42d2-b89d-d9228e4fadcf&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;참고로 네이버에서도 CLOVA OCR 서비스를 제공하고 있는데여,&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://clova.ai/&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://clova.ai/&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1737502668031&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;CLOVA&quot; data-og-description=&quot;하이퍼스케일 AI로 플랫폼 경쟁력을 강화하고 비즈니스 시너지를 확장합니다.&quot; data-og-host=&quot;clova.ai&quot; data-og-source-url=&quot;https://clova.ai/&quot; data-og-url=&quot;https://clova.ai/&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/bmFuPF/hyX4tCQaAL/SPwAzluH6K1dSB1s4mr5cK/img.jpg?width=1200&amp;amp;height=630&amp;amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/dJX2Du/hyX4nCDpnr/Q0u3FKuWaEmScYkGyixUK0/img.png?width=880&amp;amp;height=1172&amp;amp;face=0_0_880_1172&quot;&gt;&lt;a href=&quot;https://clova.ai/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://clova.ai/&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/bmFuPF/hyX4tCQaAL/SPwAzluH6K1dSB1s4mr5cK/img.jpg?width=1200&amp;amp;height=630&amp;amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/dJX2Du/hyX4nCDpnr/Q0u3FKuWaEmScYkGyixUK0/img.png?width=880&amp;amp;height=1172&amp;amp;face=0_0_880_1172');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;CLOVA&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;하이퍼스케일 AI로 플랫폼 경쟁력을 강화하고 비즈니스 시너지를 확장합니다.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;clova.ai&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;비용이 만만치 않군요.ㅠㅠ&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/xTM2g/btsLV51q3pB/7IJYtjSLQ8uDJEcbikogI0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/xTM2g/btsLV51q3pB/7IJYtjSLQ8uDJEcbikogI0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/xTM2g/btsLV51q3pB/7IJYtjSLQ8uDJEcbikogI0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxTM2g%2FbtsLV51q3pB%2F7IJYtjSLQ8uDJEcbikogI0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;632&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>OCR</category>
      <category>smartmaker</category>
      <category>노코딩</category>
      <category>스마트메이커</category>
      <category>앱개발</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/18</guid>
      <comments>https://smartjang.tistory.com/18#entry18comment</comments>
      <pubDate>Wed, 22 Jan 2025 08:38:24 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커에 웹 위젯 삽입하기</title>
      <link>https://smartjang.tistory.com/17</link>
      <description>&lt;p id=&quot;SE-2bfd06ca-e957-46da-a71b-dd639f5e94fe&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;웹 위젯 (일반적으로 '위젯'이라고도 함)은 웹 사이트, 블로그 에 쉽게 넣을 수있는 작은 프로그램입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-749c1ea7-e53e-4e33-9201-9592c89bd735&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;일반적으로 HTML 웹 내부에 간단하게 삽입이 되는데, 스마트메이커의 웹문서삽입 아톰을 이용해 간단하게 넣어 볼수 있도록 하겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-55b7bb77-b967-48ae-8c41-022b4ee89031&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #5b6170;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-2af9c331-bc7b-4754-aa41-03cacffeecc9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;일단 무료 웹위젯 제공 싸이트를 검색해 보면 여러군데가 있지만, &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6094c2e8-dd2c-46f3-bf67-3c7c9a8fe45a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;제가 찾은 위젯 제공 싸이트는 날씨 위젯 제공 업체입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;&lt;a href=&quot;https://weather.tomorrow.io/ko/widget/&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://weather.tomorrow.io/ko/widget/&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1737419748766&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;Tomorrow.io의 날씨 위젯 | Tomorrow.io&quot; data-og-description=&quot;Tomorrow.io의 날씨 위젯이 귀하의 웹사이트에 최신 기상 조건과 예보를 제공합니다!&quot; data-og-host=&quot;weather.tomorrow.io&quot; data-og-source-url=&quot;https://weather.tomorrow.io/ko/widget/&quot; data-og-url=&quot;https://weather.tomorrow.io/ko/widget/&quot; data-og-image=&quot;&quot;&gt;&lt;a href=&quot;https://weather.tomorrow.io/ko/widget/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://weather.tomorrow.io/ko/widget/&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;Tomorrow.io의 날씨 위젯 | Tomorrow.io&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;Tomorrow.io의 날씨 위젯이 귀하의 웹사이트에 최신 기상 조건과 예보를 제공합니다!&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;weather.tomorrow.io&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;580&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/1PKI8/btsLT5OKlWo/xjBdrYNBmJRRs1l3vOkqU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/1PKI8/btsLT5OKlWo/xjBdrYNBmJRRs1l3vOkqU1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/1PKI8/btsLT5OKlWo/xjBdrYNBmJRRs1l3vOkqU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1PKI8%2FbtsLT5OKlWo%2FxjBdrYNBmJRRs1l3vOkqU1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;580&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;580&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170; text-align: left;&quot;&gt;날씨, 대기질 등 다양한 디자인 형태로 제공을 하고 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;511&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c8Kawf/btsLUFV59kE/epM8SWm0jpDEafbbIfAOs1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c8Kawf/btsLUFV59kE/epM8SWm0jpDEafbbIfAOs1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c8Kawf/btsLUFV59kE/epM8SWm0jpDEafbbIfAOs1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc8Kawf%2FbtsLUFV59kE%2FepM8SWm0jpDEafbbIfAOs1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;511&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;511&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-239c3267-0295-4b5d-bf50-1ab6003f371c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;좌우 크기조정 및 지역 옵션 등을 통해 윈쪽에 생성된 HTML 코드를 활용하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-21d5e84a-3b03-4999-b05b-ef27fde5fe05&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #5b6170;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-4f6a6fe1-72f7-4788-b9ab-dbfabc145213&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;스마트메이커 웹문서삽입 아톰에 사용될 수 있도록 빈 HTML 파일을 만듭니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d7269273-0c27-4b96-b196-5dc079743152&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;HTML 파일은 주로 사용하시는 텍스트 편집기를 이용해 작업하시면 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;713&quot; data-origin-height=&quot;378&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bil0Cy/btsLTqMzOsI/nfwP2vxvWhxEoK4u2OFKUK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bil0Cy/btsLTqMzOsI/nfwP2vxvWhxEoK4u2OFKUK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bil0Cy/btsLTqMzOsI/nfwP2vxvWhxEoK4u2OFKUK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbil0Cy%2FbtsLTqMzOsI%2FnfwP2vxvWhxEoK4u2OFKUK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;713&quot; height=&quot;378&quot; data-origin-width=&quot;713&quot; data-origin-height=&quot;378&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170; text-align: left;&quot;&gt;싸이트에서 생성된 날씨코드복사를 통해 클립보드에 저장될수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;807&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bjcTK5/btsLUAAtNBC/cg9LJiB2d5fj8R16D1KyE0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bjcTK5/btsLUAAtNBC/cg9LJiB2d5fj8R16D1KyE0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bjcTK5/btsLUAAtNBC/cg9LJiB2d5fj8R16D1KyE0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjcTK5%2FbtsLUAAtNBC%2Fcg9LJiB2d5fj8R16D1KyE0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;807&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;807&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-9f6db7af-311a-427c-a383-6068e250f8c2&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-605845f6-6df3-4ccb-8e55-c08f071b55da&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;클립보드에 저장된 HTML 코드를 이 위치에 붙여넣기 하여 widget.html 파일로 저장할 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-09716897-4cf7-4feb-87ce-5c8eefdb84a5&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;파일저장 위치는 기준경로에 복사될수 있도록 합니다. 앱 패킹시 같이 HTML 파일을 패킹하기 위함입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-fbae07c0-5783-4f22-9242-d2f142a3ca20&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #5b6170;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-3bbfd161-8d00-4fcb-9644-513ec1ed68cf&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;스마트메이커 웹문서삽입 아톰의 URL 경로에 HTML 파일을 설정할 수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;792&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/sLI8V/btsLVlph3dw/FgyxXItzw9IDMrijjfxKq0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/sLI8V/btsLVlph3dw/FgyxXItzw9IDMrijjfxKq0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/sLI8V/btsLVlph3dw/FgyxXItzw9IDMrijjfxKq0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsLI8V%2FbtsLVlph3dw%2FFgyxXItzw9IDMrijjfxKq0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;792&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;792&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170; text-align: left;&quot;&gt;실행모드 전환시, 쉽게 동작되는것을 확인 할 수 있게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;div id=&quot;SE-d91d6c00-f234-4234-ac57-bec282de61ad&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;792&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/LeMMQ/btsLSo9yrBo/nqApGYKSNSwZsOtYSovGOK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/LeMMQ/btsLSo9yrBo/nqApGYKSNSwZsOtYSovGOK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/LeMMQ/btsLSo9yrBo/nqApGYKSNSwZsOtYSovGOK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLeMMQ%2FbtsLSo9yrBo%2FnqApGYKSNSwZsOtYSovGOK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;792&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;792&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;

&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170; text-align: left;&quot;&gt;위에서 제공되는 웹위젯은 반응형 웹 방식이기 때문에 스마트폰 해상도에 따라 크기 및 배치가 달라질 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;648&quot; data-origin-height=&quot;1404&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/DkY2L/btsLTPkR59w/dPfVkvqUCmTg8SlXG9SzZk/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/DkY2L/btsLTPkR59w/dPfVkvqUCmTg8SlXG9SzZk/img.jpg&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/DkY2L/btsLTPkR59w/dPfVkvqUCmTg8SlXG9SzZk/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDkY2L%2FbtsLTPkR59w%2FdPfVkvqUCmTg8SlXG9SzZk%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;362&quot; height=&quot;784&quot; data-origin-width=&quot;648&quot; data-origin-height=&quot;1404&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-0c0c6228-f44f-4cda-919a-afce7a8b1fcb&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6de36813-e587-4706-baf7-4614826174e1&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;&lt;b&gt;&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-5e2e5690-6e18-403f-af0a-746e88de18e4&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-8c1d0fec-2d3d-4bc6-9e29-8b8d6af30ad1&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-9fc8e8b0-bc39-49fa-b6cf-4a204d29d385&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-bb4ff5b2-eb1b-41f6-a9b2-8a59bfe1fb0d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b48a0186-b73c-4473-a778-726499cb047b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #5b6170;&quot;&gt;HTML 태그에 viewport 를 삽입하면 스마트폰해상도에 맞게 자동으로 크기조정이 됩니다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/17</guid>
      <comments>https://smartjang.tistory.com/17#entry17comment</comments>
      <pubDate>Tue, 21 Jan 2025 09:39:08 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커 버튼아톰의 갤러리 기능 활용하기</title>
      <link>https://smartjang.tistory.com/16</link>
      <description>&lt;p id=&quot;SE-970955b0-b48a-4c4e-8ab3-ac03ebef92fc&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트메이커 버튼 아톰을 이용해 스마트폰에 저장되어 있는 사진파일을 갤러리 기능을 이용해 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-c5ff7f72-f458-40e0-9526-732886b990ba&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;서버에 파일전송 하고자 하는 기능을 구현하고자 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e34022af-8f43-4f2c-90c3-0bd1c881e485&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-4d3e07b0-46bc-44d2-9584-a1d8a4bd7f1a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;굳이 이미지 파일을 이미지 입력란의 DB저장을 통해 이미지필드(BLOB)의 바이너리 형태의 데이터에 저장하고 않고, 서버에 파일 형태로 업로드 하려는 이유는 여러가지 활용방안에 있어서 장점이 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-c16cca8c-831b-4ee4-b2ed-8da1329a9177&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;쇼핑몰앱이나, 현장사진 관리앱등 이런앱 형태에서 사진첨부 기능 앱을 구현하고자 한다면,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b174aa1c-991f-4c10-8dd5-d7e3931bfd42&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #000000;&quot;&gt;사진파일주소(URL) 을 통해 쉽게 접근이 가능합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-571cd6c3-7f43-481e-a3f7-f56a2765e45e&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이런 앱을 구현하실때, 쉽게 사진업로드를 위해 버튼의 갤러리 기능을 활용할 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-0b6df3b1-aa43-40e9-beef-0c05754e83a3&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-76bd64ff-cbb7-47d8-8539-08df466cd283&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;일단 구현하는 과정을 살펴보면,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-89df8c5b-7bb2-4c98-adfb-f16d890458ef&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;갤러리 버튼의 참조아톰명에는 이미지 아톰명을 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;634&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/oRPcn/btsLSh2PrmP/PskjwrDTC3zp7skJC3bVx1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/oRPcn/btsLSh2PrmP/PskjwrDTC3zp7skJC3bVx1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/oRPcn/btsLSh2PrmP/PskjwrDTC3zp7skJC3bVx1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoRPcn%2FbtsLSh2PrmP%2FPskjwrDTC3zp7skJC3bVx1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;760&quot; height=&quot;634&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;634&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-fcad6e8e-5701-47ce-9490-9e03e272ecf2&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트폰의 갤러리 에서 사진 선택시, 여러장의 사진을 선택할수도 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6d1a85cd-fda9-457b-82f0-df609e2dd68b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;그렇기 때문에 이미지 입력란은 스크롤묶기 아톰을 이용해 묶을수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-412b041c-f378-4942-bb06-d43b6bf8128e&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;선택되어진 이미지를 좌우 스크롤을 통해 다중으로 볼수 있도록 수평 스크롤을 이용하여 처리합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-0a84639d-8885-421e-8a43-6fa47fccea21&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;사진 1장만 업로드 하고자 할경우에는 스크롤묶기을 이용하지 않고 바로 이미지 입력란을 이용할수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;634&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/rb4GX/btsLS58tcyG/1OkwUDMMlQbEXuwPKNgMRk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/rb4GX/btsLS58tcyG/1OkwUDMMlQbEXuwPKNgMRk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/rb4GX/btsLS58tcyG/1OkwUDMMlQbEXuwPKNgMRk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Frb4GX%2FbtsLS58tcyG%2F1OkwUDMMlQbEXuwPKNgMRk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;760&quot; height=&quot;634&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;634&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;전송버튼 클릭시 스마트서버로 파일업로드를 하기 위해서는 파일전송 업무규칙을 활용하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;313&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bhD79c/btsLT3ba8DU/rVulzIZxIq8RP74Enf2TT1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bhD79c/btsLT3ba8DU/rVulzIZxIq8RP74Enf2TT1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bhD79c/btsLT3ba8DU/rVulzIZxIq8RP74Enf2TT1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhD79c%2FbtsLT3ba8DU%2FrVulzIZxIq8RP74Enf2TT1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;728&quot; height=&quot;313&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;313&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-02872d46-d24a-4266-a4e3-44797e99f309&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스크롤에 넣어진 이미지 갯수를 알기 위해 스크롤의 &lt;/span&gt;&lt;span style=&quot;color: #ff0010;&quot;&gt;&lt;b&gt;유효행수&lt;/b&gt;&lt;/span&gt;&lt;span&gt;를 사용하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b4f9a282-9692-456a-80ea-ad2569b7ad6d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스크롤에 묶인 이미지 입력란에서 파일경로 및 파일명을 가져오기 위해서는&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-16900a21-db88-4eb2-a50e-47c9b9736c43&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;아톰명(행번호) 형태로 사용을 하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d83afd90-84cd-4433-a891-e268f1674494&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-22baaf41-5db3-4a06-8bed-5cdc2c4f513d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;b&gt;파일전송(&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;color: #ba0000;&quot;&gt;&lt;b&gt;'파일'&lt;/b&gt;&lt;/span&gt;&lt;span&gt;&lt;b&gt;, &quot;http://스마트서버주소&quot;, 서버파일명, 로컬파일경로)을 실행한다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6e11374e-fd8a-4078-8fa0-d15d8cde4422&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-80a90274-0538-4761-855c-35084433f47c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;즉, 스크롤의 유효행 수 만큼 반복문을 진행하면서 파일전송을 실행시킬수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d8bf015c-031d-40b3-ae90-5e941b95cdeb&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-9f37beb2-c71f-4c2a-b1b2-24a4ab0f9135&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;일단, 스마트메이커 PC 상에서 실행하게 되면, 파일선택창이 뜨게 되고, 이미지 파일을 선택할수 있게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b68ffa93-cac0-48d3-9d22-cb4c803bf8fc&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트폰에서는 갤러리 앱이 띄어지고 사진 파일을 선택하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;565&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/5fYYS/btsLTrcxmDe/jNyPKMdX1RkkjzK0sqbu30/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/5fYYS/btsLTrcxmDe/jNyPKMdX1RkkjzK0sqbu30/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/5fYYS/btsLTrcxmDe/jNyPKMdX1RkkjzK0sqbu30/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F5fYYS%2FbtsLTrcxmDe%2FjNyPKMdX1RkkjzK0sqbu30%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;728&quot; height=&quot;565&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;565&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;선택된 파일은 스크롤에 묶인 이미지 입력란 아톰에 순차적으로 넣어지게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;561&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cUDNtJ/btsLRNgHpb9/eCYAq4L4nkjBy6HsNptEW1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cUDNtJ/btsLRNgHpb9/eCYAq4L4nkjBy6HsNptEW1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cUDNtJ/btsLRNgHpb9/eCYAq4L4nkjBy6HsNptEW1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcUDNtJ%2FbtsLRNgHpb9%2FeCYAq4L4nkjBy6HsNptEW1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;760&quot; height=&quot;561&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;561&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-b4d1cdb5-567e-437d-8442-aa8bbf6f1c06&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;전송 버튼을 누르게 되면 서버로 파일 업로드가 진행이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-94d0489d-076c-4411-ae4c-0ca1ab59d38b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e6301f90-4cde-4de6-a7e8-238061f6b0db&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;span&gt;그럼, 사진파일 전송이 되면 스마트서버 상황을 살펴보겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-9020622a-e132-4a1f-b94b-0ce04af00651&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트서버가 설치된 PC 의 서버관리자 실시간 로그를 보면, 로그창에 위에서 지정한 파일이 업로드 진행되고 있는 과정을 확인할 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;544&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/KlAaO/btsLS6NcQ7I/u9XTV3EfXs7p5EtioqYLD0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/KlAaO/btsLS6NcQ7I/u9XTV3EfXs7p5EtioqYLD0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/KlAaO/btsLS6NcQ7I/u9XTV3EfXs7p5EtioqYLD0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKlAaO%2FbtsLS6NcQ7I%2Fu9XTV3EfXs7p5EtioqYLD0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;544&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;544&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-c669fd14-d0f9-40e2-a242-ae5bf6379817&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;스마트서버가 설치가 된 PC 를 보면, &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-8449a6cc-7fc0-4e33-beaa-6007a40fad52&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;C:\SmartServer 폴더와 C:\NAScontents 라는 폴더가 존재하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-bbeb12f6-2231-4174-8faa-66f83a96c0b9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;C:\SmartServer 폴더는 WAS (Web Application Sever) 폴더이고,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-4e33c451-df2d-4b2b-8854-82f87abc347f&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;C:\NAScontents 폴더는 웹페이지모델에서 HTML 이나 비즈니스로직, 파일업로드를 위한 폴더구조입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-8a11e307-1231-448f-96e2-89ca8508221f&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;위에서 파일전송을 통해 Upload 폴더에 전송됨을 확인할 수 있게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;383&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/4pKST/btsLSB1fjF7/9YuHJYc5ojyzCBk2bl4zKk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/4pKST/btsLSB1fjF7/9YuHJYc5ojyzCBk2bl4zKk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/4pKST/btsLSB1fjF7/9YuHJYc5ojyzCBk2bl4zKk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4pKST%2FbtsLSB1fjF7%2F9YuHJYc5ojyzCBk2bl4zKk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;383&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;383&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-af3eff62-5bbe-416f-8f12-b2f5d2d508a0&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-6c3bd38b-9b1d-471c-b953-c86b86c3e71f&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이 파일을 웹이나, 앱애서 활용하고자 한다면&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-044c9dc9-c0ec-4207-891b-c5fa52f03f0d&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;http://스마트서버주소/view/파일명 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-63ff0663-c72a-4ce2-a4dd-1e3e7d992a61&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;주소를 통해 웹이나 앱에서 쉽게 접근이 가능합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/pF9lF/btsLTQC0RH7/XVg6dpUD4l6RuOUo0jGkV1/img.png&quot; data-height=&quot;412&quot; data-width=&quot;693&quot; data-lazy-src=&quot;&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;461&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-abcd8af1-1bb3-4313-8750-08070b503871&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;앱 패킹후, 테스트해보니 스마트폰에서도 정상 동작합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-dd9e3d63-626a-4ef5-b5fc-e199bf401138&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-25497354-ee97-482c-aae1-719dc7b938f3&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #000000;&quot;&gt;파일전송시 파일명을 DB저장하여 관리할수 있도록 구현하시면, 다양하게 앱에서 활용할수 있으시라 봅니다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/16</guid>
      <comments>https://smartjang.tistory.com/16#entry16comment</comments>
      <pubDate>Mon, 20 Jan 2025 08:57:56 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커 콤보박스 기본값없음 속성 활용하기</title>
      <link>https://smartjang.tistory.com/15</link>
      <description>&lt;p id=&quot;SE-ebd33a76-e034-48a7-b161-a72e066002cc&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;스마트메이커에서 제공하는 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-6dbbcbfb-0188-4504-b799-3762e92d9f7b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;검색창과 콤보박스 아톰을 이용해 콤보 선택항목을 조건으로 검색조건을 활용하는 경우가 많습니다. &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-22f1e3aa-9c47-4174-be37-e8fa18f9e591&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-263e46a8-9160-4286-95ae-dc060d9de2c5&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;예를들어 자동차정보 테이블에 아래와 같은4개의 데이터가 있을 경우,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;436&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c42c0C/btsLP68bfbA/FOgbX1UBi6kFSMm8EJGo0K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c42c0C/btsLP68bfbA/FOgbX1UBi6kFSMm8EJGo0K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c42c0C/btsLP68bfbA/FOgbX1UBi6kFSMm8EJGo0K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc42c0C%2FbtsLP68bfbA%2FFOgbX1UBi6kFSMm8EJGo0K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;436&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;436&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-21105529-6ea3-4f85-858b-694fb10ebb83&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;제조사 필드 선택시 해당하는 제조사 항목의 데이터만 검색하고자 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-10f5ce43-b04f-4b3c-8bce-46870d110a77&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;하지만 필요에 따라 조건없이 전체 제조사를 검색하고자 하는 경우도 있을 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-7b47e93d-b940-4a54-8202-27c4d82f0d43&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;이럴때 콤보박스의 기본값없음 속성을 활용하는 방안이 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-5a0327ad-1b5f-4482-bd7f-44c28aa80515&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-c7e82dd6-4e45-4e8e-b986-82dacb998108&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;기본값없음 속성을 활용하지 않을 경우, 콤보에서 전체 항목 선택시 검색창의 기본조건을 업무규칙을 이용해 동적으로 변경하는 방안도 있지만, 업무규칙을 사용해야 하는 번거로움이 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-a1649f53-8aaa-4239-850f-3f878b663c4f&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;노코딩을 지향하는 개발도구 이기 때문에 코딩한줄 없이 사용하는 방안입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-7c02142d-c988-49c1-aa5e-94907a9156ac&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-4f3e5c81-da00-4c10-b215-3bc0e1e39e54&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;일단 제조사 항목을 콤보박스에 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-96ef1dce-fe5e-4a65-b7a0-a08d53697ca5&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;기본값없음 속성에 '전체' 라고 표시될수 있도록 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-2fd02389-0e7b-47b8-8337-587b9ba8539a&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&lt;b&gt;기본값없음 &lt;/b&gt;속성은 콤보박스 항목의 첫번째 항목으로 보이지만 실제값은 &quot;&quot; 빈값 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e4fa87a5-42b4-4376-b344-ef2f83636045&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;실제 DB 에거 검색되지 않는 존재하지 않은 값입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-99cbb319-5198-4b97-a87d-abdb7940f7f5&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;콤보박스 동작시 아래와 같은 검색결과를 얻기 위한 설정입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;154&quot; data-origin-height=&quot;138&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/mZvPj/btsLRkEbT0l/rl6hZbIcelFf3H0EbHkIU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/mZvPj/btsLRkEbT0l/rl6hZbIcelFf3H0EbHkIU1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/mZvPj/btsLRkEbT0l/rl6hZbIcelFf3H0EbHkIU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmZvPj%2FbtsLRkEbT0l%2Frl6hZbIcelFf3H0EbHkIU1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;154&quot; height=&quot;138&quot; data-origin-width=&quot;154&quot; data-origin-height=&quot;138&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;712&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/yHK58/btsLP52wnL5/R2D4KHJVM8F3PzxPl4p4e1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/yHK58/btsLP52wnL5/R2D4KHJVM8F3PzxPl4p4e1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/yHK58/btsLP52wnL5/R2D4KHJVM8F3PzxPl4p4e1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyHK58%2FbtsLP52wnL5%2FR2D4KHJVM8F3PzxPl4p4e1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;712&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;712&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left; font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;콤보박스를 설정하게 되면 자동으로 콤보_찾아오기 라는 DB처리객체가 만들어 집니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;646&quot; data-origin-height=&quot;290&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/boyhIY/btsLQN09xcz/snNKWEeHrokIAkuk1XvbjK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/boyhIY/btsLQN09xcz/snNKWEeHrokIAkuk1XvbjK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/boyhIY/btsLQN09xcz/snNKWEeHrokIAkuk1XvbjK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboyhIY%2FbtsLQN09xcz%2FsnNKWEeHrokIAkuk1XvbjK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;646&quot; height=&quot;290&quot; data-origin-width=&quot;646&quot; data-origin-height=&quot;290&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; letter-spacing: 0px; font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;이때 그룹설정이 필요한데요, 왜냐하면 위 자동차정보 테이블에의 제조사 필드 항목에는&lt;/span&gt;&lt;/p&gt;
&lt;div id=&quot;SE-ff653437-554c-4d7b-bf2a-0220b5e5a162&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;p id=&quot;SE-a45afbcf-8d31-45a7-bb17-f50426af057e&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;4개 (현대, 현대, 기아, 기아) 의 데이터가 존재하기 때문에 중복 데이터를 제거 하기 위함입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e2f6cb8e-9ab2-4de2-be84-0d46c68adf47&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;그룹을 설정하게 되면 (현대, 기아) 2개 의 데이터만 보이게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-9ab2772c-59a9-4c54-a2cd-cae663fbb868&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;img style=&quot;caret-color: transparent; color: #333333; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/wLLX0/btsLPxE9Jjp/rxd9ARu8LQLytKVGWkkCFK/img.png&quot; data-origin-width=&quot;645&quot; data-origin-height=&quot;290&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-4eb63933-ca31-4104-96f1-e2d8f4e53c22&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-83f3941b-3d48-4131-811e-1ce1e5d0d029&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;실제 SQL 문은 GROUP BY 구문이 설정이 자동으로 되게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-78ba9a2d-da5b-4734-95a0-f7bafb6d6a66&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;검색창 아톰에 검색항목을 설정하게 되면&lt;/span&gt;&lt;/p&gt;
&lt;img style=&quot;caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/cFZ1Gp/btsLP2rcWmh/sMKVk3D3dNMyi3Z8hfZTK1/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;628&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-05a45b2a-fc86-452f-b089-dd06b5417ec2&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-00c8a8c4-f981-42e6-b251-a024226a1148&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;자동으로 검색창_찾아오기 DB처리객체가 만들어 지게 되는데,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-474b2267-711e-42ae-ad18-6d825f630c49&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;여기의 조건설정에 &lt;b&gt;시작문자일치&lt;/b&gt;로 설정하게 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;583&quot; data-origin-height=&quot;472&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/FbmSH/btsLQPdCs9u/6ZPxEcaKTgNfZkHPw2kStk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/FbmSH/btsLQPdCs9u/6ZPxEcaKTgNfZkHPw2kStk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/FbmSH/btsLQPdCs9u/6ZPxEcaKTgNfZkHPw2kStk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFbmSH%2FbtsLQPdCs9u%2F6ZPxEcaKTgNfZkHPw2kStk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;583&quot; height=&quot;472&quot; data-origin-width=&quot;583&quot; data-origin-height=&quot;472&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-985a5105-0cd7-4cd8-91d0-6bdb21986e19&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left; font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;SQL 문을 보면 LIKE 처리 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;645&quot; data-origin-height=&quot;347&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/D0UBY/btsLPvAGP6T/dsfl5ECKMrh9xnPWQc3e9k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/D0UBY/btsLPvAGP6T/dsfl5ECKMrh9xnPWQc3e9k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/D0UBY/btsLPvAGP6T/dsfl5ECKMrh9xnPWQc3e9k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FD0UBY%2FbtsLPvAGP6T%2Fdsfl5ECKMrh9xnPWQc3e9k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;645&quot; height=&quot;347&quot; data-origin-width=&quot;645&quot; data-origin-height=&quot;347&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-999bde33-e63d-4645-9772-d2e5edddee5e&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;이 조건을 사용하는 이유는 콤보박스에서 기본값없음 설정일때, '전체' 항목을 선택시 빈값이기 때문에&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-18a16f89-de36-4779-bcdd-503ce2f63284&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;빈값으로 LIKE 처리를 하게 되면 조건없이 전체검색 동작이 일어나기 때문입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-cb1d3eb0-c6fa-4d63-8be7-6256ffe43bca&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-45ff6759-6796-4dc6-aa03-181265dd781d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;실제 동작하는 화면입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;bandicam-2023-07-07-14-01-59-084.gif&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;556&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/D5goN/btsLQ0FX2SF/JktGTJkXnzBWqbKXaKfjW1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/D5goN/btsLQ0FX2SF/JktGTJkXnzBWqbKXaKfjW1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/D5goN/btsLQ0FX2SF/JktGTJkXnzBWqbKXaKfjW1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/D5goN/btsLQ0FX2SF/JktGTJkXnzBWqbKXaKfjW1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;512&quot; height=&quot;556&quot; data-filename=&quot;bandicam-2023-07-07-14-01-59-084.gif&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;556&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>app</category>
      <category>노코딩</category>
      <category>스마트메이커</category>
      <category>앱개발</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/15</guid>
      <comments>https://smartjang.tistory.com/15#entry15comment</comments>
      <pubDate>Fri, 17 Jan 2025 09:30:27 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커로 ChatGPT 사용하기</title>
      <link>https://smartjang.tistory.com/14</link>
      <description>&lt;p id=&quot;SE-648b0b64-241d-4cbf-9d53-fd1068b31467&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;스마트메이커를 이용해 ChatGPT 를 사용해 보도록 하겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-ff582f87-1c88-4390-908e-2476d9aca208&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;ChatGPT 는 OpenAPI 플랫폼에서 제공하는 대화형 인공지능 서비스 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-3554bd01-e56b-4520-a43f-357650f4e4a9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;이곳에서 OpenAPI 를 제공하고 있는데요, 스마트메이커를 이용해 코딩작업 없이 이 서비스를 쉽게 활용해 볼 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-eb3f224a-689e-44a3-9fa5-a36bc7da0d86&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-1ec30350-c1ec-4a9a-a967-109f87a07479&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;먼저 싸이트에 가입 하셔서 API Key 를 받아햐 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-188d2779-d758-4b1b-9bae-e6cb492999fa&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;사용량에 따라 비용이 발생하는 서비스 이기 때문에 VISA 카드 등록이 필수 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;&lt;a href=&quot;https://platform.openai.com/docs/overview&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://platform.openai.com/docs/overview&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;우측 상단 Personal 을 클릭하시면 팝업메뉴가 나오게 되고, View API keys 를 선택합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;676&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/BEzp7/btsLMFDgDDl/naXtbgLrApGw9Reij6hsgk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/BEzp7/btsLMFDgDDl/naXtbgLrApGw9Reij6hsgk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/BEzp7/btsLMFDgDDl/naXtbgLrApGw9Reij6hsgk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBEzp7%2FbtsLMFDgDDl%2FnaXtbgLrApGw9Reij6hsgk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;676&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;676&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;+ Create new secret key 를 클릭하시면 API Key 를 발급 받을 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;676&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Aw8Uu/btsLNz99TOI/wH6ZybERhks6xgckPTlsi0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Aw8Uu/btsLNz99TOI/wH6ZybERhks6xgckPTlsi0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Aw8Uu/btsLNz99TOI/wH6ZybERhks6xgckPTlsi0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAw8Uu%2FbtsLNz99TOI%2FwH6ZybERhks6xgckPTlsi0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;676&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;676&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-164fd0bd-98ab-42f3-bd13-fe7b86915548&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;스마트메이커에서 이 서비스를 이용하려면 챗봇제작 아톰을 이용하는데요, &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-e2978aa5-e942-41f8-869a-8064cc3a1707&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;이 ChatGPT 서비스를 사용하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-643614b6-1032-4de6-9bfb-97155dda41d1&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;UI 는 기본적으로 메신저 처럼 채팅 형태로 제공되고 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-750dcb7f-cf28-4cc8-a3ff-0b7df5e3c0a9&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-82a56205-ba66-4424-8879-b0c1bc7c6599&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;설정은 종류에 ChatGPT 를 선택하고, API 키 설정에 위에서 생성한 API Key 를 설정만 하시면 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;630&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b2fGC0/btsLOtgYIzI/3gToPdJfyA27LFT1J0iVuK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b2fGC0/btsLOtgYIzI/3gToPdJfyA27LFT1J0iVuK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b2fGC0/btsLOtgYIzI/3gToPdJfyA27LFT1J0iVuK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb2fGC0%2FbtsLOtgYIzI%2F3gToPdJfyA27LFT1J0iVuK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;630&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;630&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;채팅 입력창에서 문구를 넣고 전송버튼을 클릭하시면 약간의 응답시간을 거쳐 결과값을 받게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;630&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bgJHQi/btsLNwyWvoJ/M4nWKC2upzQtsclSlAEZnK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bgJHQi/btsLNwyWvoJ/M4nWKC2upzQtsclSlAEZnK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bgJHQi/btsLNwyWvoJ/M4nWKC2upzQtsclSlAEZnK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgJHQi%2FbtsLNwyWvoJ%2FM4nWKC2upzQtsclSlAEZnK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;630&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;630&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>ChatGPT</category>
      <category>smartmaker</category>
      <category>스마트메이커</category>
      <category>앱개발</category>
      <category>인공지능</category>
      <category>챗GPT</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/14</guid>
      <comments>https://smartjang.tistory.com/14#entry14comment</comments>
      <pubDate>Wed, 15 Jan 2025 08:32:55 +0900</pubDate>
    </item>
    <item>
      <title>스마트메이커로 햄버거(삼선) 메뉴 만들기</title>
      <link>https://smartjang.tistory.com/13</link>
      <description>&lt;p id=&quot;SE-0840f4e4-9e79-47c3-adb2-b185dd858fb7&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;Android Studio 를 이용해 JAVA 나 Kotlin 언어를 이용해 앱개발 경험이 있으신 분이라면&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b1006f06-307e-4516-a44e-c05dd17cc485&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;많이 보던 UI 형태 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-75179b31-a8de-40e6-ad45-db3e04216c14&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-3c0e676b-dbfd-40f5-a7d9-cb4ce8d02bfd&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;Android Studio 에서 템플릿 형태로 아래와 같은 형태의 UI를 제공하기 때문에&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-75218120-cb4f-4d26-a7c3-984949b3043e&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;안드로이드앱에서 많이 사용하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;902&quot; data-origin-height=&quot;651&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cZPRXC/btsLMtpju10/7Rk0F5kBHruWHkgxDd5qZ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cZPRXC/btsLMtpju10/7Rk0F5kBHruWHkgxDd5qZ1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cZPRXC/btsLMtpju10/7Rk0F5kBHruWHkgxDd5qZ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcZPRXC%2FbtsLMtpju10%2F7Rk0F5kBHruWHkgxDd5qZ1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;902&quot; height=&quot;651&quot; data-origin-width=&quot;902&quot; data-origin-height=&quot;651&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p id=&quot;SE-bcdfe4e4-c9aa-4825-abf4-5c960ad798b4&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;버튼을 누르면 왼쪽에서 화면이 보이고 손가락 터치에 의해 좌우로 메뉴를 숨기는 형태의 UI 입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-ee8704d4-f7fe-475d-96d7-0f43e9737aae&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;​&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;왼쪽 삼선 메뉴 버튼을 이용해 메뉴에 많이 활용이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screen_Recording_20230615_163257_MyFont.gif&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;2340&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JCQl7/btsLNyC36rP/Gs8IGOrh9bUiFHxq8nl4J0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JCQl7/btsLNyC36rP/Gs8IGOrh9bUiFHxq8nl4J0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JCQl7/btsLNyC36rP/Gs8IGOrh9bUiFHxq8nl4J0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/JCQl7/btsLNyC36rP/Gs8IGOrh9bUiFHxq8nl4J0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;251&quot; height=&quot;544&quot; data-filename=&quot;Screen_Recording_20230615_163257_MyFont.gif&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;2340&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #000000; text-align: left;&quot;&gt;오른쪽 설정 아이콘을 통해 설정기능에 많이 활용됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screen_Recording_20230705_154543_-.gif&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;2340&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/R46Fk/btsLMqsyowm/dKSSa6Rrx6lPGKz3Te7cK1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/R46Fk/btsLMqsyowm/dKSSa6Rrx6lPGKz3Te7cK1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/R46Fk/btsLMqsyowm/dKSSa6Rrx6lPGKz3Te7cK1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/R46Fk/btsLMqsyowm/dKSSa6Rrx6lPGKz3Te7cK1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;266&quot; height=&quot;576&quot; data-filename=&quot;Screen_Recording_20230705_154543_-.gif&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;2340&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-52e74248-b283-4dbb-b46c-1146c694e1b8&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-4635f75d-71de-49af-a4da-a65c54c34036&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;이런형태의 UI 를 구현하려면 안드로이드에서 제공되는 템플릿이 있더라도 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-71a9d666-7364-422c-ba24-9d79ce8078da&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;복잡하고 난해한 코딩작업을 필요로 하게 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-a9ec738a-2ca1-4f1b-b994-ee7d0df61f8a&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-48123e2a-48c6-4350-9df3-f8fb17e4dc3e&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;하지만, 스마트메이커에서는 아톰 (Component) 형태로 제공되기 때문에, 단 한줄의 코딩작업 없이&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-5a79825e-027c-4bf8-a084-1fd19aa2a694&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;노코딩 형태로 구현이 가능 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-a5993527-4aef-41f8-9361-e81ff7884bd3&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-534a1d29-5e83-4980-ad2f-e6c4e482083a&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;슬라이딩 처리는 스마트메이커 디자인도구 &amp;gt; 뷰추가 아톰을 활용합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-b8442323-f088-4e53-86de-2361ee61dd80&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-f1ef2b58-42c4-494d-911c-9cf3b35fb6dc&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;뷰추가 아톰의 뷰유형에 슬라이딩 유형 선택하고,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-876f4fd1-ecc5-4a8d-8b87-c5a70bb2ec70&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;왼쪽슬라이딩뷰는 시작상태가 축소상태에서 왼쪽에서 오른쪽으로 확장되기 때문에 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-48d8f7c4-aa95-4d9d-80a1-f65fa3ec4a20&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;최소크기는 0으로 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;564&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ulVwe/btsLL9SduUW/DLTfAKpf46GQCkx0EHhXiK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ulVwe/btsLL9SduUW/DLTfAKpf46GQCkx0EHhXiK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ulVwe/btsLL9SduUW/DLTfAKpf46GQCkx0EHhXiK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FulVwe%2FbtsLL9SduUW%2FDLTfAKpf46GQCkx0EHhXiK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;564&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;564&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-0b71ea89-3152-4934-80a1-b6bc8a20c00b&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div id=&quot;SE-381dee31-bf54-4510-a68d-415a0140346c&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-0fcf636f-6416-46bc-a719-d8233f81377a&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;메뉴버튼을 눌렀을때 확장이 되어야 하기 때문에 진행관리자 기능을 이용해 &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-31fd3c1a-22b6-4f06-92ba-3db76f0dc2b0&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;메뉴버튼 누름 이벤트에서 왼쪽슬라이딩뷰 아톰의 확장하기 기능이 동작될수 있도록 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-3e5c43a8-1df1-41af-8354-3649726e7952&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;img style=&quot;caret-color: transparent; color: #333333; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/ctwfus/btsLNaWHXoS/beC7xoHoeNmFJutWRHcsZk/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;562&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id=&quot;SE-aeacb4c1-374d-43ec-9f8e-7931e4c0c57d&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-50d6996c-7671-4f33-8042-13a3c7055f3e&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;오른쪽 슬라이딩뷰는 반대로 왼쪽방향으로 확장될수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;717&quot; data-origin-height=&quot;706&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bfQiaP/btsLNAHFDJJ/MMQsDXiEv899HXVoJ0vwu0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bfQiaP/btsLNAHFDJJ/MMQsDXiEv899HXVoJ0vwu0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bfQiaP/btsLNAHFDJJ/MMQsDXiEv899HXVoJ0vwu0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbfQiaP%2FbtsLNAHFDJJ%2FMMQsDXiEv899HXVoJ0vwu0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;717&quot; height=&quot;706&quot; data-origin-width=&quot;717&quot; data-origin-height=&quot;706&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000; background-color: #ffffff; letter-spacing: 0px;&quot;&gt;설정버튼의 누름이벤트에서 확장될수 있도록 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;img style=&quot;caret-color: transparent; background-color: #ffffff; color: #534640; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/bmeQVr/btsLMcuz9Rj/SPI2Qn6M8Le5lqWsCEZE20/img.png&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;626&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/p&gt;
&lt;div id=&quot;SE-e56102d9-bd68-4a03-8b70-83ce56ae37da&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #000000; text-align: left;&quot;&gt;오른쪽슬라이딩뷰의 내부에 닫기버튼을 만들고 반대로 누름 이벤트에서 슬라이딩을 축소할수 있도록 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;626&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/LuIkZ/btsLNz9L3CZ/6SmrYYHXyCkd9UMPa74iCk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/LuIkZ/btsLNz9L3CZ/6SmrYYHXyCkd9UMPa74iCk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/LuIkZ/btsLNz9L3CZ/6SmrYYHXyCkd9UMPa74iCk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLuIkZ%2FbtsLNz9L3CZ%2F6SmrYYHXyCkd9UMPa74iCk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;773&quot; height=&quot;626&quot; data-origin-width=&quot;773&quot; data-origin-height=&quot;626&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div id=&quot;SE-b7eb716e-7115-4112-ad97-b8c8c2af8dff&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p id=&quot;SE-b48f7cc8-2f8f-448d-bc62-479bcabce82a&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;각 아톰의 설정이 끝났습니다. &lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-7a41e4c1-cdc0-4694-815b-91e35a23f541&quot; style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;실제 스마트메이커 PC 에서 동작하는 모습입니다.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;SE-d1a02d7f-209c-4bcf-998d-ffe02f19abb2&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;bandicam-2023-07-05-16-19-16-314.gif&quot; data-origin-width=&quot;320&quot; data-origin-height=&quot;700&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/XFapo/btsLMHnbsWK/Moy5DVj5gsHuA4auaAQRL0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/XFapo/btsLMHnbsWK/Moy5DVj5gsHuA4auaAQRL0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/XFapo/btsLMHnbsWK/Moy5DVj5gsHuA4auaAQRL0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/XFapo/btsLMHnbsWK/Moy5DVj5gsHuA4auaAQRL0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;320&quot; height=&quot;700&quot; data-filename=&quot;bandicam-2023-07-05-16-19-16-314.gif&quot; data-origin-width=&quot;320&quot; data-origin-height=&quot;700&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p id=&quot;SE-3a70129a-ff9c-47e3-8e8c-e4367fe56f36&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;스마트메이커 노코딩 기술을 이용해 코딩 한줄 없이 동작되는것을 확인할 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-d14b4ef3-d106-4a0d-9bb2-566d882f8fb8&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;셈플은 디자인 없이 동작되는 과정으로 보여 드린것으로,&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-2cd25e68-e2a8-4366-90b2-1293ef079608&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;삼선메뉴 아이콘 및 설정 아이콘등을 디자인 하셔서 활용해 보시기 바랍니다.&lt;/span&gt;&lt;/p&gt;
&lt;p id=&quot;SE-0e5dbb27-c8ea-4685-b3d9-a173c8ea5588&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;​&lt;/span&gt;&lt;/p&gt;
&lt;div id=&quot;SE-24cbd439-afaa-4d30-8df5-a7c256263ddc&quot; style=&quot;background-color: #ffffff; color: #534640; text-align: left;&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div style=&quot;background-color: #ffffff; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>smartmaker</category>
      <category>노코딩</category>
      <category>삼선메뉴</category>
      <category>스마트메이커</category>
      <category>슬라이딩</category>
      <category>앱개발</category>
      <category>햄버거메뉴</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/13</guid>
      <comments>https://smartjang.tistory.com/13#entry13comment</comments>
      <pubDate>Tue, 14 Jan 2025 16:12:50 +0900</pubDate>
    </item>
    <item>
      <title>기본검색키가 2개일때 테이블 처리방법 by 스마트메이커</title>
      <link>https://smartjang.tistory.com/12</link>
      <description>&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: justify;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #666666;&quot;&gt;스마트메이커에서 테이블 Insert, Update, Delete 처리를 하기 위해,&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #534640; text-align: justify;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #666666;&quot;&gt;일반적으로 보통 한개의 테이블에 기본검색키를 1개 사용하는 경우가 대부분입니다.&lt;/span&gt;&lt;/p&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;하지만 비지니스 로직에 따라 하나의 테이블에 2개의 기본검색키를 사용하는 경우가 있을수 있습니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;예를 들어 아래과 같은 형태의 테이블구조가 있다고 가정을 합니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;기본검색키가 되는 필드는 그룹코드와 등록번호 2개를 가집니다.&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;720&quot; data-origin-height=&quot;545&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cWwDnn/btsLJDMBTFH/q96u9KI6VScYvtaEYoJ4l0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cWwDnn/btsLJDMBTFH/q96u9KI6VScYvtaEYoJ4l0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cWwDnn/btsLJDMBTFH/q96u9KI6VScYvtaEYoJ4l0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcWwDnn%2FbtsLJDMBTFH%2Fq96u9KI6VScYvtaEYoJ4l0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;720&quot; height=&quot;545&quot; data-origin-width=&quot;720&quot; data-origin-height=&quot;545&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;668&quot; data-origin-height=&quot;368&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dGRioV/btsLMsa5ubE/Kn9OlvUl92kwIBPui9srD1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dGRioV/btsLMsa5ubE/Kn9OlvUl92kwIBPui9srD1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dGRioV/btsLMsa5ubE/Kn9OlvUl92kwIBPui9srD1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdGRioV%2FbtsLMsa5ubE%2FKn9OlvUl92kwIBPui9srD1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;668&quot; height=&quot;368&quot; data-origin-width=&quot;668&quot; data-origin-height=&quot;368&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;스마트메이커에서는&amp;nbsp;이럴경우 2개의 입력란 순서설정이 매우 중요합니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;첫번째 입력란 (그룹코드) 은 기본검색키만 설정합니다. 거의 고정되는 값이라 보면 됩니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;두번째 입력란 (등록번호) 은 (기본검색키 + 자동검색 + 자동증가) 로 설정하게 합니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;이렇게 하시면 등록번호 입력란에서 엔터키를 입력하게 되면 기본검색키가 동작하여 값을 가져오게 됩니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;결국 저장이나, 수정, 앞장, 뒷장이 정상동작합니다.&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;514&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ctFm2J/btsLMnASYs3/wpdqOLFzSmSJKo4nq81NnK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ctFm2J/btsLMnASYs3/wpdqOLFzSmSJKo4nq81NnK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ctFm2J/btsLMnASYs3/wpdqOLFzSmSJKo4nq81NnK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctFm2J%2FbtsLMnASYs3%2FwpdqOLFzSmSJKo4nq81NnK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;740&quot; height=&quot;514&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;514&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <category>셈플자료실</category>
      <category>app개발</category>
      <category>노코딩</category>
      <category>스마트메이커</category>
      <category>앱개발</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/12</guid>
      <comments>https://smartjang.tistory.com/12#entry12comment</comments>
      <pubDate>Mon, 13 Jan 2025 10:28:09 +0900</pubDate>
    </item>
    <item>
      <title>데이터베이스 처리시, Left Join 활용하기2 by 스마트메이커</title>
      <link>https://smartjang.tistory.com/11</link>
      <description>&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;스마트메이커에서 2개의 테이블을 Left Join 으로 검색하는 방법입니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;이전 게시글 처럼,&amp;nbsp;&lt;b&gt;거래처정보&lt;/b&gt;,&amp;nbsp;&lt;b&gt;상품정보&lt;/b&gt;,&amp;nbsp;&lt;b&gt;거래내역&lt;/b&gt;&amp;nbsp;3개의 테이블이 있다고 가정을 하겠습니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;나중에 응용을 하셔서 상세필드를 추가로 구현해 보시기 바랍니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;거래내역 테이블에는 거래처코드, 상품코드만 있고 거래처명, 상품명, 단가 에 대한 필드는 없습니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;즉&amp;nbsp;&lt;span&gt;거래처정보, 상품정보 테이블에서 Join 을 통해&amp;nbsp;&lt;/span&gt;&lt;span&gt;거래처명, 상품명 정보를 받아오는 방법입니다.&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;565&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bUW1Mj/btsLIc79wjL/ybNpCVziohTVCeYrRBwpk0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bUW1Mj/btsLIc79wjL/ybNpCVziohTVCeYrRBwpk0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bUW1Mj/btsLIc79wjL/ybNpCVziohTVCeYrRBwpk0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbUW1Mj%2FbtsLIc79wjL%2FybNpCVziohTVCeYrRBwpk0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;740&quot; height=&quot;565&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;565&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;만약 여러개의 테이블에서 Join 처리를 해서 검색하려면 아래와 같이 설정을 하면 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;거래내역 테이블을 조회하기 위해 거래처명, 상품명을 Join 처리해서 가지고 오려고 합니다.&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;293&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cvAEo1/btsLIof06h3/2rbei6LvhqaPmxe7XQjJKk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cvAEo1/btsLIof06h3/2rbei6LvhqaPmxe7XQjJKk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cvAEo1/btsLIof06h3/2rbei6LvhqaPmxe7XQjJKk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvAEo1%2FbtsLIof06h3%2F2rbei6LvhqaPmxe7XQjJKk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;740&quot; height=&quot;293&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;293&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;DB처리객체에서 관계설정(Join) 을 설정합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;484&quot; data-origin-height=&quot;541&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bPGHgK/btsLIM8IyFM/uWUWO8vk4xKM0tli2wRcy1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bPGHgK/btsLIM8IyFM/uWUWO8vk4xKM0tli2wRcy1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bPGHgK/btsLIM8IyFM/uWUWO8vk4xKM0tli2wRcy1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbPGHgK%2FbtsLIM8IyFM%2FuWUWO8vk4xKM0tli2wRcy1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;484&quot; height=&quot;541&quot; data-origin-width=&quot;484&quot; data-origin-height=&quot;541&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;스마트메이커에서 제공하는 검색창을 이용해 검색해 봅니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;이렇게 하시면 다른 Left Join 처리를 해서 다른 테이블에 있는 거래처명 및 상품명을 가져오게 됩니다.&lt;/div&gt;
&lt;div style=&quot;list-style-type: none; background-color: #ffffff; color: #666666; text-align: justify;&quot;&gt;&lt;img style=&quot;text-align: left; caret-color: transparent; letter-spacing: 0px;&quot; src=&quot;https://blog.kakaocdn.net/dn/cddfPf/btsLIFohh5k/2mHsiliZ8PVdKYSBNMji61/img.png&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;565&quot; data-is-animation=&quot;false&quot; /&gt;&lt;/div&gt;</description>
      <category>셈플자료실</category>
      <category>smartmaker</category>
      <category>스마트메이커</category>
      <author>민영이아빠</author>
      <guid isPermaLink="true">https://smartjang.tistory.com/11</guid>
      <comments>https://smartjang.tistory.com/11#entry11comment</comments>
      <pubDate>Thu, 9 Jan 2025 10:37:57 +0900</pubDate>
    </item>
  </channel>
</rss>