이미지

이미지 관련 정보를 제공합니다.

“이미지”는 화면/컴포넌트에서 사용하는 이미지를 의미하며, 아래의 기능을 제공합니다.

• 이미지는 이미지 파일 이름으로 등록/관리됨
• 이미지는 등록 과정을 통해 프로젝트 루트 디렉토리 또는 하위 디렉토리에 저장됨
• 이미지는 이미지 URL(디렉토리 경로(“/“부터 시작) + 이미지 파일 이름)로 구분됨
• 이미지의 등록/배포/로딩/설정은 이미지 URL을 기준으로 동작함
• 이미지는 PNG/GIF/JPG와 같이 WEB 환경에서 지원가능한 이미지 유형만 사용가능

이미지 파일명은 아래와 같은 명명 규칙으로 설정하는 것을 권고한다.

• 이미지 파일명 “영문자”/“숫자” 문자로 구성하는 것이 호환성이 좋음
• 상황별 이미지 파일명은 “이미지 파일 역할” + “_” + “normal/focus/down/hover/disable”등을 붙이는 것을 권고
• 이미지 파일명에 “공백” 문자는 포함할 수 없음

이미지를 등록하는 방법은 아래와 같다.

• 이미지 등록전에 “프로젝트”창의 “화면” 탭의 화면 트리에 저장 대상 디렉토리 확인 및 필요시 생성
• “리소스→이미지 등록” 메뉴 또는 툴바 “이미지 등록” 버튼 클릭
• 이미지 등록창에서 이미지 선택 및 저장 경로 지정후 저장
• “프로젝트”창의 “이미지” 탭의 이미지 트리에 생성된 이미지 파일 확인

등록된 이미지는 아래와 같이 관리한다.

• “리소스→이미지 등록” 메뉴 또는 툴바 “이미지 등록” 버튼 클릭
• 이미지 등록 창에서 삭제 대상 이미지 선택 및 “삭제”, “모두 삭제” 버튼 클릭
• “프로젝트”창의 “이미지” 탭의 이미지 트리에 삭제된 이미지 파일명 확인

등록된 이미지는 화면/컴포넌트의 image 관련 속성을 통해서 사용한다.

• 화면/컴포넌트 image 관련 속성 팝업창 버튼 클릭하여 이미지 설정
• 화면/컴포넌트 image 관련 속성 값에 이미지 URL 값 설정
• 참고: 이미지 파일의 투명 처리된 영역은 개발툴에서는 투명으로 보이지는 않음
• “프로젝트”창의 “이미지” 탭의 이미지 트리에 이미지를 드래그하여 화면 캔버스에 드랍시 이미지 컴포넌트가 생성됨

등록된 이미지는 아래와 같이 이 디렉토리 하위에 화면 저장 디렉토리 경로에 저장된다.

• 화면: ${프로젝트홈 디렉토리}/image

루트 디렉토리 하위에 “AAA” 디렉토리를 생성하고, “BBB.png”란 이미지 저장시 해당 파일의 실제 위치는 아래와 같다.

• ${프로젝트홈 디렉토리}/image/AAA/BBB.png