키움 API 로그인화면 뽀대나게 만들어보기


민민핫 로그인화면을 UI를 입혀서 만드는 방법입니다. 뭐 그냥 대충 버튼집어넣어서 만들어도 되지만 이왕 만들꺼면 좀 뽀대나도록 만들어 보는것도 좋을것 같아서 한번 시도해 봤어요.


먼저 포토샵이나 이미지 편집 프로그램이 로그인화면에 사용할 이미지들을 만들어줍니다. 뭐 간단하게 만들면 되지 않을까 싶어요. 전 디자이너도 아니고 그냥 개발자 출신이라서 예쁘게 만들 수가 없네요 ㅠㅠ


일단 제가 만들어서 하고 싶은건 요런 화면 ㅋㅋㅋ



프로그래밍 하기는 쉽지요? ㅎㅎㅎ 요즘 C#이 워낙에 잘 나와서 그런지 그냥 갖다가 붙이기만 해도 짜잔 완성이 되더라구요. 일단 위에 디자인한 버튼 이미지들을 프로그램에 구현한 화면을 먼저 공개합니다요. (참고로 로그인하기 버튼을 누르면 키움API를 실행하기 위한 권한 확인창이 뜨면서 동영상 녹화가 자동으로 중지되어버리네요 아놔참내,, 두개 녹화해서 영상 이어붙이는 방법을 아직 몰라그 그냥 이상태로 올려용)




자 이제 소스코드를 공개할께요. 뭐 공개라고 할것도 없는 그냥 허접한 내용입니다. 혹시다 도움이 될까 싶어서 공개하니 코드가 이상하다고 뭐라 하지는 마시구용 


먼저 간단히 설명부터 드리자면, 화면은 두개로 구성했어요.


#메인화면    : 로그인이되고나면 보여지는 화면


#로그인화면 : 로그인화면 


메인화면 소스코드입니다.

별건없어요. 그냥 로그인화면 폼을 화면의 최상단에 보여주는 역할 정도 ㅎㅎ


    public partial class MainForm : Form

    {

        // 로그인 폼 생성 및 정의

        private LoginForm loginForm;


        public MainForm()

        {

            InitializeComponent();


            loginForm = new MoneyComeOn1.LoginForm(this);

            loginForm.TopLevel = false; // 생성시 화면의 최상단에 위치하도록 만듬

            loginForm.FormSendLoginEvent += new LoginForm.FormSendDataHandler(LoginButtonClicked);

            this.Controls.Add(loginForm);

            loginForm.Parent = this;

            loginForm.Show();

        }


        private void LoginButtonClicked(object sender)

        {

            axKHOpenAPI.CommConnect();

        }



        private void OnFormSizeChanged(object sender, System.EventArgs e)

        {

            loginForm.Size = this.Size;

        }

    }


그리고 로그인화면 구현 코드입니다.

로그인화면에서는 항상 로그인패널이 항상 화면의 가운데 오도록 만들었구요,

로그인버튼을 누르면 메인폼의 키움API의 CommConnect 함수가 호출될 수 있도록 구성해 봤어요.


public partial class LoginForm : Form

    {


        private MainForm parentForm;


        // 로그인 버튼 클릭시 메인폼의 키움 API의 함수 호출 이벤트 핸들러 정의

        public delegate void FormSendDataHandler(Object obj);

        public event FormSendDataHandler FormSendLoginEvent;


        public LoginForm()

        {

            InitializeComponent();

        }


        public LoginForm(MainForm parent)

        {

            InitializeComponent();


            parentForm = parent;

            this.Size = parentForm.Size;


        }


        private void loginButton_Click(object sender, EventArgs e)

        {

            this.FormSendLoginEvent(1);

        }


        private void blogButton_Click(object sender, EventArgs e)

        {

            // 블로그 연결 

            System.Diagnostics.Process.Start("http://happyryu.tistory.com");

        }


        private void donateButton_Click(object sender, EventArgs e)

        {

            // 블로그 연결 (임시 버전 ㅋㅋㅋ)

            System.Diagnostics.Process.Start("http://happyryu.tistory.com");

        }


        private void exitButton_Click(object sender, EventArgs e)

        {

            // 프로그램 종료

            Application.Exit();

        }


        private void OnFormSizeChanged(object sender, System.EventArgs e)

        {

            // 화면 사이즈가 변경될 때 로그인 화면 창이 항상 화면의 가운데 위치하게 만듬

            // 뽀대나게 ㅎㅎ


            loginPanel.Location = new Point(this.Size.Width / 2 - loginPanel.Size.Width / 2,

                this.Size.Height / 2 - loginPanel.Height / 2);

        }


    }


UI를 입히는 방법은 이렇게 글로 적으면 이상할 것 같아서 그냥 화면을 녹화해 봤답니다.

아래 녹화영상을 확인해 보시면 로그인화면 구현 절차가 그대로 녹화되어 있으니 필요한신 분은 그냥 참고정도로 활용해 보시면 좋을것 같아요 ㅎㅎㅎ




그럼 다음에 또 시간날때 좀더 구현된 모습으로 돌아오겠습니다용^^

아참, MoneyComeOn 프로그램은 완전 무료로 배포할 계획이랍니다.