최근 메신저 시장은 단순히 메시지를 주고받는 기능을 넘어, '누가 더 스마트하게 업무와 일상을 보조하느냐'의 전쟁터가 되었습니다. 이러한 흐름 속에서 텔레그램이 2026년 봄, 또 한 번의 역대급 업데이트를 선보였습니다. 이번 변화의 핵심은 단순한 기능 추가가 아닙니다. 사용자의 프라이버시를 지키면서도 AI와 멀티미디어를 결합해 '생산성 도구'로서의 입지를 완전히 굳히겠다는 의지가 담겨 있습니다. 1. 내 손안의 문장 전문가, 'AI 에디터' 단순히 오타를 고쳐주는 수준을 넘어, 이제 텔레그램은 여러분의 '문장 비서'가 되기로 했습니다. 이번 업데이트의 핵심인 AI 에디터는 대화창에 3줄 이상의 긴 글을 입력하면 자동으로 'AI 아이콘'이 나타나며 활성화됩니다. 해당 기능이 특별한 이유는 단순히 문법을..

'스프링부트(SpringBoot)로 풀캘린더 구현하기 - 1,2'로 기본적인 풀캘린더를 설정했다면, 일정 선택 이벤트, 일정 바 리사이즈, 일정 드래그 등등 이벤트를 다음으로 만들어보려고 합니다. 다양한 이벤트 중에서 일정 선택 이벤트에 해당하는 'select' 속성에 대해서 알아보겠습니다. 풀캘린더 'select' 속성FullCalendar '선택(select)' 속성은 사용자가 마우스 드래그 또는 터치 동작을 이용해 달력의 여러 날짜나 시간대를 강조 표시하고 특정 기간을 선택할 수 있도록 하는 기능입니다. 대표적으로 새로운 일정을 생성할 때 사용됩니다. selectable 속성'선택(select)' 기능을 사용하기 위해서는 일정을 선택할 수 있어야 하므로, 캘린더에서 사용자에게 날짜/시간대 선..

웹 개발자나 콘텐츠 관리자라면 한 번쯤 사용해 봤을 WYSIWYG 에디터, CKEditor4에서 사용자 인터페이스의 핵심인 '도구모음(Tollbar)'에 대해서 알아보겠습니다. 기본 도구 모음도 훌륭하지만, 운영 중인 웹 사이트나 서비스의 특성에 맞춰 꼭 필요한 기능만 넣거나, 자주 쓰는 기능을 눈에 띄게 배치하면 사용자 경험(UX)이 훨씬 좋아질 것입니다. 왜 도구 모음을 사용자 정의해야 할까요? 향상된 사용자 경험(UX)불필요한 버튼을 제거하고, 자주 사용하는 기능을 전면에 배치하여 사용자가 더 빠르고 효율적으로 작업할 수 있습니다. 그렇게 된다면 불필요한 클릭과 찾고자 하는 버튼의 서치 범위를 줄여 사용자에게 효율적인 사용자 경험을 제공할 수 있습니다. 간결한 인터페이스너무 많은 버튼은 사..

'스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 1' 게시글을 통해서 기본적인 캘린더를 구성하는 방법에 대해서 알아보았습니다. 풀캘린더 구현하기 두 번째 게시글에서는 첫 번째 게시글에서 마지막 방식에 해당하는 '일정 목록을 요청할 URL로 풀캘린더에 일정 추가하기'를 구체적인 방법과 흐름으로 확인해 보겠습니다. 풀캘린더 설정하기전체 소스 적용 화면 가장 먼저, 'events' 속성에 설정된 일정 목록을 조회하기 위한 요청 '/scheduleList.do'를 컨트롤러에서 직접 구성한 List 데이터를 응답으로 받아오는 형식으로 먼저 테스트해봅니다. 서버 설정하기1. 직접 구성한 List 데이터 응답으로 받기 컨트롤러에서 요청('/scheduleList.do..

풀캘린더 기본적인 여러 속성에 대해서 이전 게시글을 통해 알아봤다면, 스프링 부트를 활용해 풀캘린더를 구현해보도록 하겠습니다. 풀캘린더는 일정 관리 기능을 구현할 때 많이 사용하는 라이브러리로, 많은 기업들이 풀캘린더 라이브러리를 가져다 일정 관리 기능으로 활용하고 있는 만큼 직접 구현하고 사용해보는데 의미가 있습니다. 풀캘린더 설정하기캘린더 화면 만들기 캘린더 화면을 만들기 위해서는 JSP페이지를 이용해 캘린더가 보여질 페이지를 관련 스크립트, 스타일을 적용해 만들어야합니다. 그렇기 위해서는 스크립트, 스타일 정보를 CDN 또는 제공 파일을 통해 설정해야 합니다. 캘린더 화면을 구성하기 위해 기본적인 설정이 필요한데 각 설정에 따라 3가지 방식으로 캘린더 화면을 구성해보겠습니다.풀캘린더 기본 설..

도구 모음 위치 CKEditor4 에서는 편집기 툴바 위치를 사용자가 지정할 수 있습니다. 기본적으로 클래식 기반의 iframe 편집기에서는 툴바가 편집기 UI 상단, 편집 영역 위에 배치됩니다. 하지만, config.toolbarLocation 구성 설정을 사용하여 해당 옵션을 변경할 수 있습니다. 기본 편집기 구현의 경우 'top'(기본값)과 'bottom' 설정 중 하나를 선택할 수 있습니다.# config 파일 내 설정 시// config.toolbarLocation = 'top';config.toolbarLocation = 'bottom'; config 파일을 이용하지 않고, 스크립트로 설정한 replace 구문에서도 편집기 크기 조정을 비활성화 할 수 있습니다.# replace 구문 사용 시C..

CKEditor 크기를 사용자 정의에 맞춰 가로,세로로 조정하거나 가로로만 조정하거나 세로로만 조정할 수 있습니다. 최소 및 최대 크기를 설정하여 사용자 정의에 맞춰 조정을 할 수도 있고 크기 조절에 대한 설정을 비활성화 할 수 있습니다. 그래서 이번 글에서는 CKEditor 크기를 사용자 정의에 맞춰 조정할 수 있는 방법에 대해서 알아보겠습니다. 편집기 크기 조정 및 사용자 정의 해당 기능은 CKEditor 4 공식 다운로드 사이트 에서 제공하는 Standard 및 Full 프리셋에 포함된 Editor Resize 플러그인을 통해 제공됩니다 . 온라인 빌더를 사용하여 사용자 정의 빌드에 추가 할 수도 있습니다 . 너비와 높이 조작은 클래식 편집기 에서만 지원되며 인라인 편집기 에서는 작동하지 않..

이전 작성된 게시글을 통해서 CKEditor4 편집기 크기 조정을 할 수 있고 하는 방법에 대해서 알아보았습니다. 게시글 마지막 대안으로 편집기 크기 조정에 어려움이 있고 신경 쓰지 않고 설정할 수 있는 자동 조절의 기능이 있다고도 소개했는데요. 이번 글은 편집기 자동 조정이란 무엇이고 조정 방법에 대해서 알아보겠습니다. 콘텐츠에 맞춰 편집기 높이 자동 조정 해당 기능은 CKEditor 다운로드 사이트에서 제공하는 CKEditor4 사전 설정에 포함되지 않은 선택적 플러그인을 통해 제공되며 온라인 빌더를 사용하여 사용자 정의 빌드에 추가해야 합니다. 선택 사항인 자동 확장 플러그인을 사용하면 CKEditor4가 편집 영역에 입력되니 콘텐츠의 양과 크기에 따라 자동으로 수직으로 확장되거나 축소되..

CKEditor4 편집기를 이용하다보면 기본적으로 설정되어 있는 높이가 생각보다 작아서 편집기를 활용하는데에 있어서 불편함을 느낀 경험이 있을겁니다. 편집기의 편집 높이 영역이 작을 수록 에디터를 통해서 글 작성하는데에 많은 불편함과 답답함이 있을텐데요. 그런 부분을 개선할 수 있도록 CKEditor4는 편집기 크기를 조정할 수 있는 설정 정보를 제공하고 있습니다.     편집기 크기 조정  CKEditor4 편집기는 클래식 편집기에서만 수정이 가능합니다. 에디터 config 파일 내에서 수정을 진행한다면 config.width, config.height 설정을 통해서 크기를 조정할 수 있습니다. 하지만, CKEditor4 인라인 편집기에서는 해당 설정이 무시됩니다.  클래식 편집기의 너비와 높이는 해당..

CKEditor4를 사용하는 작업자라면 기본적인 설정들을 활용해서 원하는 CKEditor의 형태를 구성해 나갈것입니다. 대표적인 설정으로는 UI 색상, 언어, 크기, 사용 기능의 배치 등등이 있습니다. 다양한 설정들 중, 사용자 인터페이스의 UI 색상 및 언어를 설정할 수 있는 방법에 대해서 알아보겠습니다.     사용자 인터페이스 UI 색상 설정  개발자는 편집기 UI 색상을 쉽게 조정하여 CKEditor 4가 내장된 웹사이트나 애플리케이션의 모양과 느낌에 맞게 만들 수 있습니다. 해당 기능은 소위 "카멜레온" 기능과 호환되는 에디터 스킨에만 사용할 수 있습니다. CKSource에서 만든 스킨, 즉 Moono-Lisa, Moono, Kama Skin은 이미 이를 지원합니다. 사용자 지정 스킨을 사용하는..

많은 웹 개발자들이 스프링을 활용해서 웹 애플리케이션을 개발합니다. 물론 다른 프레임워크 또는 다른 언어들을 이용해서도 웹 애플리케이션을 만듭니다. 필자는 스프링 프레임워크를 이용해서 웹 애플리케이션을 개발합니다. 그래서 여러 플랫폼 개발을 진행할 때 게시판 구성에 필요한 에디터를 보편적으로 많이들 사용하는 에디터를 선정해 구성합니다. 그 중, CKEditor를 에디터로 선정하여 플랫폼에서 사용할 수 있도록 합니다. 물론 다양한 에디터가 존재하므로 그 중 하나를 선택하여 플랫폼을 구성할 수 있을것입니다. 오늘은 스프링 프레임워크를 활용해 CKEditor4 에디터를 적용해보도록 하겠습니다.     CKEditor4 Builder 사용하기 1.  CKEditor4 Builder 접속하기CKEditor4 Bu..

CKEditor는 웹 애플리케이션 개발을 할 때 게시판 CRUD 개발의 내용을 입력 할 때 에디터로 활용할 수 있다. 티스토리 블로그에서 사용하고 있는 에디터, 네이버 스마트 에디터 등등 다양한 플랫폼에서 제공하는 에디터처럼 CKEditor도 내가 원하는 텍스트를 입력하고 크기를 키우고 색상도 설정할 수 있고 강조, 정렬, 표, 이모티콘, 링크, 이미지 추가 등등과 같은 기능을 사용할 수 있다. 다양한 에디터처럼 많은 기능을 제공하고 있고 무료 OPEN SOURCE로 배포하고 있는 CKEditor에 대해서 알아보자.     CKEditor란? CKEditor는 웹 기반의 WYSIWYG(What You See Is What You Get) 텍스트 편집기로, 사용자가 HTML 문서를 쉽게 작성하고 편집할 수..