(주)HNS

분류	Trouble Shooting
적용 플랫폼	IEC266 IEC667 IEC1000 Windows CE 5.0 Windows Embedded CE 6.0 Windows Embedded Compact 7 .NET Compact Framework 2.0 .NET Compact Framework 3.5 C# VB.NET C++ SmartX New Framework SmartX Old Framework
키워드	이미지, SmartImageChecker, 이미지 에러, ObjectDisposed, 예외 발생
첨부파일	TechNote81_Example.zip

Image관련 TechNote가 다양하게 있어, 상황에 따라 참고해야 할 순서와 간단한 설명을 나타내는 표입니다. 아래 표를 참고하여 상황에 맞게 TechNote의 참고 순서를 확인하시기 바랍니다.

CASE 1 : 이미지를 사용할 경우 반드시 숙지해야 할 내용 및 주의사항

순서	제목 및 설명
1	[필독] 81. 사용자 인터페이스(UI) 이미지 제작 및 변환 시 주의사항 이미지 제작 유의사항과 제품 내 확인용 이미지 테스트 파일을 포함한 문서입니다.
2	[필독] 83. SmartImageChecker를 사용하기 위해 이미지를 취합하는 방법 프로젝트에서 사용된 이미지를 원본 이미지 없이 사용하는 방법과 PC용 이미지 적합성 테스트 파일을 포함한 문서입니다.

본 자료는
1. 이미지 제작 가이드
2. 신규 이미지 제작 시 주의사항
3. 기존 이미지 변환 시 주의사항
4. SmartImageTester 및 SmartImageChecker 프로그램 안내
4-1) SmartImageTester 사용방법
4-2) SmartImageChecker 사용방법
순서로 진행합니다.

사용자 인터페이스(UI)에 적용될 이미지를 제작할 때는 반드시 Photoshop을 사용하여 작업해야 합니다. 다만 Photoshop 버전과 저장할 때의 설정 등에 대해서 아래의 내용을 반드시 확인 후 이미지를 제작하시기 바랍니다.
※ 본 내용은 SmartX Framework를 사용하지 않을 경우에도 해당하는 내용으로 IEC-Series에서 사용자 인터페이스(UI) 이미지를 작성할 경우 반드시 숙지하시기 바랍니다.

1. 이미지 제작 가이드

프로그램에 적용할 이미지 작업 시 반드시 지켜야 할 사항으로 숙지해야 할 사항입니다.

[STEP-1] 사용 Tool	[STEP-2] DPI	[STEP-3] 이미지 Format
Photoshop(★필수)	96(★필수)	PNG(권장)

주의Photoshop을 사용하여 이미지 제작 시 주의사항

- Form에 적용한 이미지(리소스)를 추출하여 재사용을 금지합니다.
- Photoshop CC 2017 이상의 버전은 압축 알고리즘이 호환되지 않아 ObjectDispose 예외가 발생하므로 Photoshop CC 2017 이전의 버전을 사용하여 이미지를 제작하시기 바랍니다. (단, 이전의 버전으로 이미지 작업이 어려우시다면 아래의 “포토샵이 없는 경우” 참고내용의 양식을 작성하여 보내주시기 바랍니다.)
- 제작된 이미지의 Photoshop 버전이 CS6 (13.0), CC 2014, CC 2015가 아닌 경우 변환하여 저장할 때 반드시 Photoshop CS6 (13.0) 버전을 사용하여 변환하시기 바랍니다. (Photoshop CC 2014, 2015 버전으로 변환 시 에러 해결 불가)

[정상적으로 이미지가 적용되는 Photoshop 버전]

-Photoshop CS6 13.0
-Photoshop CC 2014
-Photoshop CC 2015

[이미지 제작 가이드]

[STEP-1] 사용 Tool	[STEP-2] DPI	[STEP-3] 이미지 Format
Photoshop(★필수)	96(★필수)	PNG(권장)

주의Photoshop을 사용하여 이미지 제작 시 주의사항

[정상적으로 이미지가 적용되는 Photoshop 버전]

-Photoshop CS6 13.0
-Photoshop CC 2014
-Photoshop CC 2015

STEP-1	포토샵으로 이미지를 저장 시 [Save as] 사용
포토샵이 아닌 다른 Tool을 사용하시는 경우 호환성 문제로 프로그램 오류가 발생할 수 있습니다. 포토샵으로 이미지 저장 시 [File] → [Save for Web]을 통한 이미지 저장은 권장하지 않습니다. 반드시 [Save As]를 통해 저장하시기 바랍니다.
[STEP-1] 포토샵 열기 → [메뉴] → [File] → [Save As]
[STEP-2] [Format] → PNG 선택 → [저장]

주의Form에 적용한 이미지(리소스)를 추출하여 재사용을 금지합니다.

참고포토샵이 없는 경우
개발 프로그램의 이미지를 [이미지 제작 가이드]에 맞게 변경이 불가능한 경우 HNS로 신청서를 작성하여 이미지와 같이 메일로 보내주시면 권장 이미지로 변경해드리겠습니다.

이미지 변경 신청서
업체명		담당자
연락처		E-Mail

※ [E-mail] app@smartx.co.kr 또는 design@smartx.co.kr

STEP-2	이미지 해상도 96DPI 설정
이미지 파일(BMP, JPG, PNG)의 해상도를 96DPI가 아닌 다른 해상도를 사용하시는 경우 프로젝트에 이미지 적용 시 이미지의 크기가 임의로 변경(축소)되어 보일 수 있습니다. 포토샵에서 이미지 해상도를 변경하시기 바랍니다.
[STEP-1] 포토샵 열기 → [메뉴] → [File] → [Open] 변경할 이미지 파일을 불러옵니다.
[STEP-2] [메뉴] → [Image] → [Image Size] 해상도 확인 및 변경 ※ 반드시 체크박스 해제 후 해상도를 변경해야 합니다.

STEP-3	PNG 이미지 형식을 권장
이미지 형식은 한가지로 PNG만 사용하길 권장합니다. 확장자 PNG와 달리 JPG와 GIF는 손실 압축 파일이기 때문에 투명효과 처리 시 Masking이 고르지 않는 현상이 발생하거나 이미지의 해상도가 떨어져 보일 수 있습니다. (단, BMP는 용량이 크므로 메모리 최적화를 위해 PNG를 권장합니다.)
[메뉴] → [File] → [Save As] → [Format] → PNG 선택 → [저장] 이미지 파일의 Format을 PNG(.PNG;.PNS)로 선택하여 저장하는 것을 권장합니다.

2. 신규 이미지 제작 시 주의사항

신규 이미지 제작 시, "1. 이미지 제작 가이드" 에 맞추어 제작하지 않을 경우 임의의 시점에서 에러가 발생할 수 있기 때문에 반드시 권장 사항에 맞춰 이미지를 제작하시기 바랍니다.

이미지 제작 가이드 권장 사항에 맞춰 제작하지 않을 경우 응용 프로그램 오류 및 Object Disposed Exception 등이 발생하게 됩니다. 아래 이미지와 같은 오류가 발생할 경우 "TechNote 2. 이미지 형식 문제에 따른 Exception 해결 방안"을 참고하시기 바랍니다.

참고자세한 내용은 "TechNote 2. 이미지 형식 문제에 따른 Exception 해결 방안" 을 참고하시기 바랍니다.

2. 기존 이미지 변환 시 주의사항

이미지를 제작할 때 Photoshop CS6(13.0), CC 2014, CC 2015 버전을 사용하지 않고 제작한 경우에는 권장 버전의 Photoshop을 사용하여 다시 저장하는 과정을 통해 에러 발생을 방지할 수 있습니다. 다만 다시 저장하여 버전을 변환하는 경우에는 반드시 Photoshop CS6(13.0) 버전을 사용해야 에러가 발생하지 않습니다. (Photoshop CC 2014, CC 2015의 경우에는 에러 발생 해결 불가)

이미지 변환 시 사용할 수 있는 Photoshop 버전	Photoshop CS6(13.0)
이미지 변환을 지원하지 않는 Photoshop 버전	Photoshop CC 2014, Photoshop CC 2015, Photoshop CC 2017, Photoshop CC 2018, Photoshop CC 2021 (그 외 이후 버전 포함)

Photoshop CS6(13.0) 버전의 경우 이전 버전의 Photoshop이기 때문에 해당 버전으로 이미지를 변환할 수 없는 경우에는 아래의 양식에 따라 내용을 작성한 뒤 E-Mail을 통해 변환할 이미지와 함께 보내주시면 이미지를 변환해드립니다.

이미지 변환 신청서
업체명		담당자
연락처		E-Mail

3. SmartImageTester 및 SmartImageChecker 프로그램 안내

개발 프로그램에 적용되는 이미지 호환성 및 에러발생 유무를 확인하기 위해 SmartImageTester와 SmartImageChecker 프로그램을 제공하고 있습니다.

	SmartImageTester	SmartImageChecker
방식	IEC - Series에 테스트 할 이미지를 빠른 속도 및 반복적으로 화면 출력하여 에러 발생 이미지를 확인하는 프로그램	이미지 정보 확인 프로그램 (PhotoShop 버전, 이미지의 DPI 확인)
검사 조건	사용자 인터페이스(ui) 이미지 필요
사용 방식	IEC - Series에 프로그램 실행	PC에 프로그램 실행
체크 소요시간	테스트 시간 발생 함	PC에서 바로 확인 가능
적용	권장	필수

※ SmartImageTester, SmartImageChecker 프로그램을 사용하기 위해서는 사용자 인터페이스(UI)에 적용 된 이미지를 취합하여야만 확인 가능합니다.

참고SmartImageChecker 프로그램의 자세한 사용법은 "TechNote83. SmartImageChecker를 사용하기 위해 이미지를 취합하는 방법"을 참고하시기 바랍니다.

참고SmartImageCheck 프로그램으로 사용되는 이미지의 검증은 반드시 하셔야 합니다. 추가적으로 SmartImageTester 프로그램으로도 함께 검증하시는 것을 권장합니다.

3-1) SmartImageTester 사용 방법

SmartImageTester 프로그램은 "TechNote81_Example.zip" 첨부파일을 다운로드하시기 바랍니다.

[STEP-1] 에러가 발생하는 프로그램의 모든 이미지를 리소스 내보내기하여 이미지 취합합니다.

주의이미지 크기(가로X세로)가 400 이하, 5353 이상인 이미지는 에러가 검출되지 않기 때문에 검사 대상에서 자동으로 제외됩니다. 그렇기 때문에 반드시 SmartImageChecker 프로그램과 함께 사용하여 Cross Check하시기 바랍니다.

[STEP-2] 취합한 모든 이미지를 SD Card / Flash Disk / USB Memory 중 한곳에 Image 폴더를 생성 후 해당 위치에 이미지를 복사합니다. (※ 폴더 이름은 반드시 Image로 생성하시기 바랍니다.)

[STEP-3] SD Card 혹은 USB Memory의 경우 IEC-Series 제품에 연결

[STEP-4] SmartImageTester 프로그램 실행

[STEP-5] [Select Path] 버튼을 클릭하여 이미지가 있는 경로를 선택 후 [OK] 버튼 클릭

[STEP-6] [Start] 버튼을 클릭하면 경로에 있는 모든 이미지에 대한 Image Test를 시작합니다.

※ 이미지 크기(가로X세로)가 400 이하, 5353 이상인 이미지는 에러가 검출되지 않기 때문에 검사 대상에서 자동으로 제외됩니다. 그렇기 때문에 반드시 SmartImageChecker 프로그램과 함께 사용하시기 바랍니다.

[STEP-7] 비권장 방식으로 제작된 이미지가 있는 경우 프로그램에서 예외를 발생시킵니다.

3-2) SmartImageChecker 사용 방법

참고SmartImageChecker의 사용방법은 TechNote83. SmartImageChecker를 사용하기 위해 이미지를 취합하는 방법 - 7. 프로젝트에 사용된 모든 이미지를 취합해 SmartImageChecker로 검사하는 방법을 참고하시기 바랍니다.

주메뉴